Error while uploading image and JSON object from Angular to Spring Boot

Question

I am using Angular 8 and spring boot. If I upload image and object from Postman, it successfully uploads. If I try the same from Angular it fails and error is

[org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported]

If I set headers to following in Angular

var options = { headers: new HttpHeaders().set('Content-Type', 'application/json;charset=UTF-8') };
    return this.http.patch(`${environment.apiUrl}products/`, data, options);

I still get the error

[org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/json;charset=UTF-8' not supported]

Here is the controller in Spring Boot

@PostMapping(consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    @PreAuthorize("hasRole('USER')")
    public ResponseEntity<?> create(
            @RequestPart(value = "file", required = false) MultipartFile file,
            @RequestPart(value = "product") @Valid ProductDTO productDTO) throws IOException

In Angular this is file upload input

<input type="file" id="file" (change)="handleFileInput($event.target.files)" accept="image/*">

In component

fileToUpload: File = null;

This is file upload function

handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
}

In Submit method

const formData = new FormData();
    formData.append('file', this.fileToUpload);
    formData.append('product', this.form.value);

This is all happening in Angular and Spring, but in Postman it is successfully updating.

In Postman

please show what content type you are using in your headers in postman — emmanuel agarry, Apr 23 '20 at 14:25
As @emmanuelagarry suggests you, maybe the error is in the content-type of your header. — Miguel Cabrera, Apr 23 '20 at 14:33
If I set to`multipart/form-data`, I receive error `Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found` — usmanwalana, Apr 23 '20 at 14:38
See https://stackoverflow.com/questions/36005436/the-request-was-rejected-because-no-multipart-boundary-was-found-in-springboot — wero026, Apr 23 '20 at 14:56
@rw026 In the answer you suggested, If I leave it blank, It sets the headers to `application/octet-stream` automatically. No luck — usmanwalana, Apr 23 '20 at 15:01
https://stackoverflow.com/questions/61389255/upload-files-angular-spring-boot/61428407#61428407 worked form — nani21984, May 24 '21 at 13:03

Error while uploading image and JSON object from Angular to Spring Boot

0 Answers0