How to post the data of 'multipart/form-data' form with Ionic4?

Hi,
I have to post some data from an Ionic form to an existent web service.
The form contains some mandatory text fields and an optional image field.
Now I’m trying to send only the mandatory fields.

I have this test done with WebStorm that works well

Snippet A:

#################################################################
# Route:            - /warning
# Method:           - POST
# Description:      - Creates new item without the attachment
#################################################################
POST http://{{host}}:{{port}}/warning
Content-Type: multipart/form-data; boundary=WebAppBoundary
auth: {{auth_token}}

--WebAppBoundary
Content-Disposition: form-data; name="data"

{
  "deviceId": 77,
  "warningTypeId": 1,
  "description": "test"
}
--WebAppBoundary--

Now I have to implement the Ionic code to submit the form data.
Googling a bit I’ve seen that with the HttpClient library I should use an object called FormData.

So I’ve done this code:

Snippet B:

sendReport(values) {
    ....

    const tempToken = this.getToken();
    const headers = {
      'enctype': 'multipart/form-data;',
      'Content-Type': 'application/json',
      'Accept': 'plain/text',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
      'Access-Control-Allow-Headers': 'Authorization, Origin, Content-Type, X-CSRF-Token',
      'auth': tempToken
    };

    const formData = new FormData();
    const dataJson = {
      'deviceId': values.device_id,
      'description': values.msg_text,
      'warningTypeId': values.failures[0]
    };
    console.log('dataJson:', dataJson);
    formData.append('data', JSON.stringify(dataJson));
    console.log('formData: ', formData.getAll('data'));

    return this.httpClient.post(commandUrl,
      formData,
      {headers: headers, responseType: responseType});
}

However I get the error: “Bad request”, so I think that A) and B) are not equivalent.
Since I think this is a common requirement, how should I use FormData?
And is it the right choice? I have to send both simple fields and a file to a pre-existent and working web service.

Thank you very much

Claudio

1 Like

I’ve solved sending the data in this way:

sendReport(values) {
    ....

    const tempToken = this.getToken();
    const headers = {
      'enctype': 'multipart/form-data;',
      'Accept': 'plain/text',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
      'Access-Control-Allow-Headers': 'Authorization, Origin, Content-Type, X-CSRF-Token',
      'auth': tempToken
    };


    const formData = new FormData();
    const dataJson = {
      'deviceId': values.device_id,
      'description': values.msg_text,
      'warningTypeId': values.failures[0]
    };
    console.log('dataJson:', dataJson);
    formData.append('data', JSON.stringify(dataJson));
    console.log('formData: ', formData.getAll('data'));

    return this.httpClient.post(commandUrl,
      formData,
      {headers: headers, responseType: responseType});
}
1 Like