title: File Upload with Angular2 to REST API
body: <p>Actually, I'm working on a Spring REST API with an interface coded in Angular 2.</p>
  
  <p>My problem is I can't upload a file with Angular 2.</p>
  
  <p>My Webresources in java is that : </p>
  
  <pre class="lang-java prettyprint-override"><code>@RequestMapping(method = RequestMethod.POST, value = "/upload")
  public String handleFileUpload(@RequestParam MultipartFile file) {
      //Dosomething 
  }
  </code></pre>
  
  <p>And it is perfectly working when I call it through URL request with Auth header etc ...
   ( with Advanced Rest Client extension for Chrome ) </p>
  
  <p>Proof: (everything works fine in that case ) </p>
  
  <p><a href="https://i.stack.imgur.com/8Cfiq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8Cfiq.png" alt="enter image description here"></a>
  I added the </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver" /&gt;
  </code></pre>
  
  <p>Spring config file and the Pom dependency </p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;dependency&gt;
      &lt;groupId&gt;commons-fileupload&lt;/groupId&gt;
      &lt;artifactId&gt;commons-fileupload&lt;/artifactId&gt;
      &lt;version&gt;1.2&lt;/version&gt;
  &lt;/dependency&gt;
  </code></pre>
  
  <p>BUT when I try to do the same thing with a webform :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="file" #files (change)="change(files)"/&gt;
  &lt;pre&gt;{{fileContents$|async}}&lt;/pre&gt;
  </code></pre>
  
  <p>With the (change) method : </p>
  
  <pre class="lang-javascript prettyprint-override"><code>change(file) {
      let formData = new FormData();
      formData.append("file", file);
      console.log(formData);
      let headers = new Headers({
          'Authorization': 'Bearer ' + this.token,
          'Content-Type': 'multipart/form-data'
      });
      this.http.post(this.url, formData, {headers}).map(res =&gt; res.json()).subscribe((data) =&gt; console.log(data));
      /*
      Observable.fromPromise(fetch(this.url,
          {method: 'post', body: formData},
          {headers: this.headers}
      )).subscribe(()=&gt;console.log('done'));
      */
  }
  </code></pre>
  
  <p>My web service returns me an error 500, with that in tomcat logs: <a href="http://pastebin.com/PGdcFUQb" rel="noreferrer">http://pastebin.com/PGdcFUQb</a></p>
  
  <p>I tried the <code>'Content-Type': undefined</code> method too but without success ( the web service return me a 415 error in that case.</p>
  
  <p>Can someone help me to figure out what's the problem is? </p>
  
  <p>Problem solved, I'll update that question later with my code :) but, have a look on the plunker it's working perfectly well.
  Thanks.</p>