"Required MultipartFile parameter 'uploadfile' is not present" with Angular2 and Spring

Question

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.

Now I want to upload files from angular to spring.

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

<dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.2</version>
</dependency>

In spring I have configured the multipartfilter as a bean.

See below:

 @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;
  }

My REST-API Method:

/**
 * 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
    }
}

In Angular I use the module ng2-file-upload to upload files.

HTML:

<input type="file" ng2FileSelect (fileOver)="fileOverBase($event)" [uploader]="uploader" multiple  name="uploadfile"/><br/>

Typescript via xhr-object:

uploadFile(file: File): Promise<any> {

    return new Promise((resolve, reject) => {

        let xhr: XMLHttpRequest = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            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);
}

When I upload a file, I get the error message:

[org.springframework.web.bind.MissingServletRequestParameterException: Required MultipartFile parameter 'uploadfile' is not present]
... <500 Internal Server Error

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

The error still the same. It appears to be a missing Spring configuration — Toni Mahoni, Nov 10 '16 at 09:24
however, this is total confusing usage of ng2, it has its own http module to handle http request...it seems your client is not setup properly — David Steiman, Nov 10 '16 at 10:51

score 4 · Accepted Answer · answered Nov 10 '16 at 16:40

I found a solution.

I shifted the configuration in the class "WebConfigurer".

@Bean(name = "commonsMultipartResolver")
public MultipartResolver multipartResolver() {
    log.info("Loading the multipart resolver");
    return new StandardServletMultipartResolver();
}


@Bean
public MultipartConfigElement multipartConfigElement() {
    MultipartConfigFactory factory = new MultipartConfigFactory();

    factory.setMaxFileSize("10MB");
    factory.setMaxRequestSize("10MB");

    return factory.createMultipartConfig();
}

In angular I used the solution from Eswar.

Now it works fine. Thanx.

`MultipartConfigFactory` is now marked as deprecated. I'm facing the same issue in jHipster, I added the second bean to my `WebConfigurer.java` and the issue persists. — jordan.baucke, Jan 24 '17 at 09:44

"Required MultipartFile parameter 'uploadfile' is not present" with Angular2 and Spring

1 Answers1