title: Upload file in angular2: Body (FormData) empty
body: <p>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.</p>
  
  <p>Here's a simplified service method that sends the POST request:</p>
  
  <pre><code>public uploadFile(url : string, file: File): Observable&lt;any&gt; {
    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) =&gt; (res.text() != "" ? res.json() : {}));
  }
  </code></pre>
  
  <p>Note that I've set the header to application/x-www-form-urlencoded and send the formData containing the file in the body.</p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/6GvtJ.png" rel="noreferrer">Data before Request</a></p>
  
  <p>But in the request, the body is an empty object {}:</p>
  
  <p><a href="https://i.stack.imgur.com/YAuaL.png" rel="noreferrer">Request</a></p>
  
  <p>I assume, Angular is trying to do JSON.stringify(formData), at least, when I try this, I also get "{}" as output.</p>
  
  <p>I've seen plenty of posts doing exactly the same (http.post(url, formData)). So what am I missing? </p>