File Upload with Angular2 to REST API
<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>