POST multipart/form-data in Ionic Native HTTP

Ionic Native
1

Hi All

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

2

@Kanishk12

try below example

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

thanks

1 Like
3

@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

4

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

5

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.

6

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
7

Hey, this is angularā€™s http service. The question is for Ionic Native HTTP

1 Like
8

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

9

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.

10

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

11

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

12

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
13

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.