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?

Answer 1

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

See here

2017-08-24

Answer 2

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()).