How to send multipart request in angular 6?

Question

I need to send a multipart request.

When I am submitting the form I am getting below error from backend,

Resolved exception caused by Handler execution: org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported

I am able to hit from Advanced rest client, but facing issue with angular.

On backend side below is The REST endpoint.

@PostMapping("/createCIF")
public Response < Map < String, Object >> createCIF(
@RequestPart("actDocs") List < MultipartFile > actDocs,
 @Valid @RequestPart("createCIFReq") CreateCIFReq createCIFReq,
 HttpServletRequest request) throws URISyntaxException {

}

Below is the angular side code in component.ts file.

let formData = new FormData();
formData.append('actDocs', this.userInfoService.mulitPartFileArray);
 formData.append('createCIFReq', JSON.stringify(this.userInfo));

   this.userInfoService.createCif(formData)
        .pipe(first())
        .subscribe(
             data => {
   }
 }

Angular side Service level code

createCif(formData): any {
    return this.http.post<any>(this.url + 'createCIF',  
 formData)
    .pipe(map(cif => {
  return cif;
     }));
   }

score 0 · Answer 1 · answered Oct 01 '19 at 15:24

I got stuck on this issue an entire day.

Angular seems to fail to set a correct content-type to the JSON part. I managed to solve this by creating a Blob :

let formData = new FormData();
formData.append('actDocs', this.userInfoService.mulitPartFileArray);
formData.append(
    'createCIFReq',
    new Blob([JSON.stringify(this.userInfo)], {type: 'application/json'})
);

Hope it helps.

How to send multipart request in angular 6?

1 Answers1