Multipart is null when uploading formdata to remote Tomcat server

Question

I have a problem with multipart file. I am uploading a file from frontend (react)and pass it to my backend like this:

export function uploadExcelFile(files) {
  const dataToTransfer = new FormData();
  dataToTransfer.append('uploadedFile', files[0]);

  return (dispatch) => {
    const OPTIONS_POST_EXCEL = {
      ...OPTIONS_POST,
      headers: {
      },
      body: dataToTransfer,
    };

    return fetch('/api/excelstuff/upload', OPTIONS_POST_EXCEL)
      .then((res) => {
        // do stuff to dispatch
      })
      .catch((err) => {
        throw err;
      });
  };
}

The backend is implemented using Spring Boot, when it receives the formdata, the code looks like this:

@RequestMapping(value="/upload", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResponseEntity<List<MyList>> uploadExcelFile(@RequestBody MultipartFile uploadedFile) {
            log.warn("Is multipartfile empty? {}", uploadedFile);
            return excelImporterService.uploadExcelFile(uploadedFile);
        }
    }

When I push my project to CloudFoundry, the RequestBody is null. But running the project locally it works! I am running the application on TomCat Server based.

I have tried including compile('commons-fileupload:commons-fileupload:1.3.3') on my gradle build. and included the following:

@Bean
public MultipartResolver multipartResolver() {
    CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
    commonsMultipartResolver.setMaxUploadSize(-1);

    return commonsMultipartResolver;
}

I have included this on my configuration (yml file)

spring:
 application:
  name: somename
 http:
  multipart:
   enabled: false

I hope it is a common problem and someone has solved it already, please help!

Answer 1

Try adding multipart/form-data as content type to your request.

Good luck!