Multipart post request from Angular To Spring

Question

I am here trying to post some data from Angular App to spring boot backend, and unfortunately, I am stuck with an incomprehensible bug for a day,

This is my API

@PostMapping("/add", consumes = ["multipart/form-data"])
fun addTeam(
    @RequestPart(name = "file") file: MultipartFile,
    @RequestPart(name = "body") team: Team
): ResponseEntity<*> {
    val imgUrl = filesStorageService.storeFile(file)

    val fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath()
        .path("/storage/downloadFile/")
        .path(imgUrl)
        .toUriString()


    val list = teamService.addTeam(team, fileDownloadUri)
    return ResponseEntity(list, list.status)
}

and here's the Angular API call

addTeam(team: Team, coverFile: File): Observable<boolean> {
return new Observable<boolean>(subscriber => {
  let formDate = new FormData();
  formDate.append('file', coverFile);
  formDate.append('body', JSON.stringify(team));
  this
    .client
    .post<ResponseWrapper<Boolean>>(environment.BASE_URL + this.ADD_TEAM, formDate, {
      headers: {'Content-Type': 'multipart/form-data'},
     })
......

so here I got an exception saying

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

so I found some solutions tell to set the angular content type to undefined but this also did not work then I removed the content type from the angular call

but this gives me another error

2020-12-12 19:12:41.298  WARN 16892 --- [nio-8080-exec-9] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported]

so I made the spring app accepts application/octet-stream but it results,

2020-12-12 19:14:39.775  WARN 16796 --- [nio-8080-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundarykunWjFPmOyVdc8vn' not supported]

so can anyone help me through this?

Also, I tried this API using postman and it's working when I put content type to multipart/form-data

Answer 1

Maybe you can try this one in your angular app:

formDate.append('file', coverFile);
formDate.append('body', new Blob([JSON.stringfy(team)], { type: 'text/plain' }));

And now, in your Spring, change the type of the team to string :

@PostMapping("/add", consumes = ["multipart/form-data"])
fun addTeam(
    @RequestPart(name = "file") file: MultipartFile,
    @RequestPart(name = "body") team: String
): ResponseEntity<*> {

Now, after you get the result of the body , you can parse it into an object with your spring.

Answer 2

I recently faced this problem, but with NestJS on the back-end and adding a file name as a third parameter to the append() function helped.

formDate.append('file', coverFile, '<FILE_NAME_HERE>');

Also I think you don't need to specify 'Content-Type' header explicitly, Angular detects and sets it automatically.

Answer 3

after trying many solutions, I finally found that if I want to post many parts in angular I should include the body of json value as a json blob with it's type, and no need to specify the content type of the request itself

just like this,

formData.append('body', new Blob([JSON.stringify(team)], {
    type: 'application/json'
  }));