"Required MultipartFile parameter 'uploadfile' is not present" with Angular2 and Spring
<p>I have a single-Page-Application with angular2 (2.1.0) and a REST API with Spring (microservice). The microservices were built via jHipster (2.3). The communication between angular and the microservices works fine.</p>

<p>Now I want to upload files from angular to spring.</p>

<p>I have include the necessary library in my pom.xml file as a dependency:</p>

<pre><code>&lt;dependency&gt;
        &lt;groupId&gt;commons-fileupload&lt;/groupId&gt;
        &lt;artifactId&gt;commons-fileupload&lt;/artifactId&gt;
        &lt;version&gt;1.3.2&lt;/version&gt;
&lt;/dependency&gt;
</code></pre>

<p>In spring I have configured the multipartfilter as a bean.</p>

<p>See below:</p>

<pre><code> @Configuration
 @EnableWebSecurity
 @EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
 public class MicroserviceSecurityConfiguration extends WebSecurityConfigurerAdapter {

  ...

  @Override
  protected void configure(HttpSecurity http) throws Exception {
      //http.addFilterBefore(multipartFilter(), CsrfFilter.class);
      System.out.println("Loading configure");
      http
      .addFilterBefore(multipartFilter(), CsrfFilter.class)
          .csrf()
          .disable()
          .headers()
          .frameOptions()
          .disable()
      .and()
          .sessionManagement()
          .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
      .and()
          .authorizeRequests()
          .antMatchers("/api/**").authenticated()
          .antMatchers("/management/**").hasAuthority(AuthoritiesConstants.ADMIN)
          .antMatchers("/swagger-resources/configuration/ui").permitAll()
      .and()
          .apply(securityConfigurerAdapter());

  }

 @Bean(name = "commonsMultipartResolver")
  public CommonsMultipartResolver commonsMultipartResolver() {
      final CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
      commonsMultipartResolver.setMaxUploadSize(-1);

      return commonsMultipartResolver;
  }

 @Bean
  @Order(0)
  public MultipartFilter multipartFilter() {
          MultipartFilter multipartFilter = new MultipartFilter();
          multipartFilter.setMultipartResolverBeanName("commonsMultipartResolver");
          return multipartFilter;
  }
</code></pre>

<p>My REST-API Method:</p>

<pre><code>/**
 * Upload single file using Spring Controller
 */
@RequestMapping(value = "/uploadFile",
        method = RequestMethod.POST)
@Timed
public String uploadFileHandler(@RequestHeader("Authorization") String token, 
        @RequestParam("uploadfile") MultipartFile file) {
    System.out.println("bin in der Methode: uploadFileHandler");
    if (!file.isEmpty()) {
        // do something
    }
}
</code></pre>

<p>In Angular I use the module <a href="http://valor-software.com/ng2-file-upload/" rel="nofollow noreferrer" title="ng2-file-upload">ng2-file-upload</a> to upload files. </p>

<p>HTML:</p>

<pre><code>&lt;input type="file" ng2FileSelect (fileOver)="fileOverBase($event)" [uploader]="uploader" multiple  name="uploadfile"/&gt;&lt;br/&gt;
</code></pre>

<p>Typescript via xhr-object:</p>

<pre><code>uploadFile(file: File): Promise&lt;any&gt; {

    return new Promise((resolve, reject) =&gt; {

        let xhr: XMLHttpRequest = new XMLHttpRequest();
        xhr.onreadystatechange = () =&gt; {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.response));
                } else {
                    reject(xhr.response);
                }
            }
        };

        xhr.open('POST', this.projectAPI + '/uploadFile', true);
        // If I set the content-type
        // I don't get an answer in spring
        //xhr.setRequestHeader('Content-Type', 'multipart/form-data');
        xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('id_token'));

        let formData = new FormData();
        console.log(file.name);
        formData.append("uploadfile", file, file.name);
        xhr.send(formData);
    }).catch(this.handleError);
}
</code></pre>

<p>When I upload a file, I get the error message: </p>

<pre><code>[org.springframework.web.bind.MissingServletRequestParameterException: Required MultipartFile parameter 'uploadfile' is not present]
... &lt;500 Internal Server Error
</code></pre>

<p>What is wrong? Did I forget something? I'm very grateful for any help.</p>