POST multipart/form-data in Ionic Native HTTP

Hi All

Is there a way to do POST request with multipart/form-data in ionic native HTTP ?

@Kanishk12

try below example

https://devdactic.com/ionic-2-images/

thanks

1 Like

@vd_virani, Thanks for replying.

It is a great example, but to use this i’ll have to change a whole lot of my code. Below are some lines from my code, just see if you can suggest something in this approach:

let clientConfirmData = new FormData();
var blob = new Blob([this.signature], { type: ‘image/png’ });

clientConfirmData.append(“patientConfirmation”, blob);

this.http.post(url, clientConfirmData, headers)
.then(data =>{

                                        })
                                        .catch(error => {
                                          
                                        }));

so, my question is does clientConfirmData has to be a JSON object for it to work, won’t it work with FormData type object ? ( http is from ionic native’s not angular’s)

Thanks

Did you ever solve this? I need to send as multipart/form-data as required by the server

No, Ionic’s Native Http does not support FormData type objects, But you can use Angular’s Http to achieve the same.
In my case, the backend guys had to change the service to accept JSON Object instead of FormData Object.

Ionic does support FormData. To those who are looking for answer, following codes work

postFile(token:string, file:Blob){

        let url = WebService.API_POST_FILE + "?token="+token;
        let httpOptions = {
            headers: new HttpHeaders({
                'enctype': 'multipart/form-data; boundary=----WebKitFormBoundaryuL67FWkv1CA'
            })
        };
        
        let formData = new FormData();
        formData.append('file', file, 'test.jpg');

        console.log("post photo to URL at "+url);
        return this.http
            .post<SimpleResponse>(
                url,
                formData,
                httpOptions
        );
    }
2 Likes

Hey, this is angular’s http service. The question is for Ionic Native HTTP

1 Like

any help please face same issue can’t send selected file to my http post api end point :frowning:

Hi,
Ionic native HTTP request accepts only, object and array formats with key value pairs are the string format.
we can pass file as a base64 string format.
in backend decode the base64 string.

For those who are looking for to upload images using Ionic Native HTTP. There is function called uploadFile() that you can use.

Hi,
I’m using this code to send data:

    const headers = {
      'enctype': 'multipart/form-data; boundary=WebAppBoundary',
      'Content-Type': 'multipart/form-data; boundary=WebAppBoundary',
      'auth': tempToken
    };

    const formData = new FormData();
    const dataJson = {
      'deviceId': 77,
      'description': 'gino',
      'warningTypeId': 7
    };
    const jsonString = JSON.stringify(dataJson);
    formData.append('data', jsonString);

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

But on the server I can see that the body of the request is empty.
That is the text into the “data” variable doesn’t arrive to the server.
Which could be the problem?
The web service is pre-existent and working.

Thank you.

cld

Excuse me,
the problem was the header, this is the right one:

    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
    };
1 Like

I am not able to establish connection using HttpClient or any other api except native http that doesnot support form data. How can I use other api and establish successful connection? Here is my code and details Ionic native http post formdata
I have tried every solution I could find but to no result.