Upload files with multipart/form-data on native app using capacitor

Capacitor
1

I have an Ionic app that runs on native IOS and Android devices. I have a form that requests some data from the user and allows him to capture a photo with his device and attach the photo to the form. I want to send those data (including the images) to my server. Here is the method that works totally fine in a normal web browser:

addStepsToActivity(
issueId: string,
activityId: string,
steps: ActivityStepControl
): Observable<Array> {
return from(steps).pipe(
concatMap((step: ActivityStepControl) => {
const formData = new FormData();
formData.append(‘description’, step.description);

    if (step.files && step.files.attached) {
      Array.from(step.files.attached).forEach((file: File) => {
        formData.append('files', file, file.name);
      });
    }
    return this.httpService
      .post<UploadStatus>(`/issues/${issueId}/activities/${activityId}/steps`, formData)
      .subscribe()
  })
);

}

On a native IOS device this does not work, I captured the outgoing http POST request and saw that it is empty:

POST /api/labs//issues/6687d3gfdgdf10086e9412e1/activities/37cfdfsa157-4c2b-bad2-e912b88bfd42/steps HTTP/1.1
Host:
Cookie:
Accept: application/json, text/plain, /
Accept-Encoding: gzip, deflate, br
X-Requested-With: XMLHttpRequest
User-Agent: App/3.87 CFNetwork/1496.0.7 Darwin/23.5.0
Content-Length: 0
Accept-Language: en-DE,en;q=0.5
Connection: keep-alive

In the Safari web inspector console I can see:

CapacitorHttp XMLHttpRequest 1720177616715 /api/labs//issues//activities//steps: 141.469ms

and also:

Object:
callbackId: “35986664”
methodName: “request”
options:
data: Array (2):
0 {key: “description”, value: "Hallo Beschreibung ", type: “string”}
1 Object:
key: “files”
type: “string” {
value: File {name: “image.jpg”, lastModified: 1720177587000, webkitRelativePath: “”, size: 2240065,
type: “image/jpeg”, …}
}
dataType: “formData”
headers: {X-Requested-With: “XMLHttpRequest”, Accept: “application/json, text/plain, /”}
method: “POST”
url: “/api/labs//issues//activities//steps”
pluginId: “CapacitorHttp”
type: “message”

It returns a 403 Forbidden. So my FormData is not appended correctly.
My app should work on normal browsers and on native IOS / Android devices. So I thought about implementing a HttpInterceptor and handling the form data there.

Now my question is: How do I need to implement the file upload using the CapacitorHttp Plugin? I am using Capacitor 6. Any help is appreciated.