Upload file in angular2: Body (FormData) empty

Question

I'm trying to upload a picture with Angular2 to my REST Service (Loopback). The Loopback service works (tested with Postman) and accepts files with the x-www-form-urlencoded header.

Here's a simplified service method that sends the POST request:

public uploadFile(url : string, file: File): Observable<any> {
  let headers: Headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  let formData = new FormData();
  formData.append('file', file);

  let options: RequestOptionsArgs = { headers: headers };

  return this.http.post(url, formData, options)
  .map((res: any) => (res.text() != "" ? res.json() : {}));
}

Note that I've set the header to application/x-www-form-urlencoded and send the formData containing the file in the body.

In Angular, up until the point where I http.post the request, the formData is populated with the file, the file content is present, everyting's fine:

Data before Request

But in the request, the body is an empty object {}:

Request

I assume, Angular is trying to do JSON.stringify(formData), at least, when I try this, I also get "{}" as output.

I've seen plenty of posts doing exactly the same (http.post(url, formData)). So what am I missing?

Strange. I recently created a [Plunker](https://plnkr.co/edit/R8yJpRWsE35pMpB1QeG3?p=preview) to answer a similar question and as you can see, just POSTing `formData` works. AFAIK, Angular DOES NOT automatically `JSON.stringify(formData)`. It will POST what you pass as is. — AngularChef, Jan 29 '17 at 18:08
I have done this the same way also. Are you 100% sure you 'file' is set to something? — Ben Cameron, Jan 29 '17 at 21:01
@AngularFrance Thanks for the Plunker! I compared it with my code and watched the output and it was so similar, also all the data was set, real strange! I tried removing the options from the request, because I figured that's the only aspect that differs between our solutions. And now it works. The request is then with multipart/form-data but interestengly my Loopback service does not care. However, it's still a bit frustrating. Would like to know why it doesn't work with urlencoded — Christoph, Jan 29 '17 at 21:20
@BenCameron Thx for your suggestions. 'file' was indeed set. The Observable is subscribed to in the caller method. That's not it. Could see the request go out, only with {} in the body. — Christoph, Jan 29 '17 at 21:23
@Christoph did you solve this problem? I'm stuck on this as well. — sebnukem, Jul 05 '17 at 02:11

score 8 · Answer 1 · answered Aug 24 '17 at 09:58

8

Just remove headers.append('Content-Type', 'multipart/form-data'); can solve problem.

See here

2017-08-24

answered Aug 24 '17 at 09:58

Belter

3,573
5
42
58

This solved it for me, using Web Api 2 and Angular 4 – Namirna Oct 10 '17 at 19:46
Why is that? What's wrong with headers.append('Content-Type', 'multipart/form-data')? – Omtechguy Feb 05 '18 at 17:23
Can you see my problem please: https://stackoverflow.com/questions/49942899/upload-file-in-angular-5 – OnnaB Apr 27 '18 at 10:33
Please see this package https://github.com/bleenco/ngx-uploader, the best file uploader I have fount. @OnnaB – Belter Apr 28 '18 at 01:29

score 1 · Answer 2 · answered Jul 05 '17 at 17:10

From this How to inspect FormData? SO answer and this MDN documentation outputing FormData in the console just results in a {}.

FormData can directly be used in a for ... of structure, instead of entries(): for (var p of myFormData) is equivalent to for (var p of myFormData.entries()).

score 0 · Answer 3 · answered Jul 12 '17 at 12:31

There is another solution is to use base64 and convert it in back-end side: `

var reader = new FileReader();
    reader.readAsDataURL(file);
    let res;
    reader.onload = function () {
    let headers = new Headers();
    headers.append("Content-type","application/x-www-form-urlencoded");
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });
    return this.http.post(config.serverUrl+"/index.php",
      {
         "file":reader.result}, options)
         .toPromise()
         .then(this.extractData)
         .catch(this.handleError);
      }
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };`

score 0 · Answer 4 · answered May 07 '18 at 07:26

In my case i used formData.set() instead of formData.append()

please see example below :

 UploadFile(fileToUpload: File): Observable<boolean> {
     const endpoint = 'api/image/upload';
     var formData = new FormData();
     formData.set('file', fileToUpload);
     return this._http
     .post(endpoint, formData)
     .map(() => { return true; })
     .catch((e) => this.handleError(e));
 }

Upload file in angular2: Body (FormData) empty

4 Answers4