[FIXED] The request was rejected because no multipart boundary was found angular+spring

Issue

I'm trying to upload a file recently downloaded with Angular2 to Spring API Rest.

The problem is (display on spring app)...

The request was rejected because no multipart boundary was found

at org.apache.tomcat.util.http.fileupload.FileUploadBase$FileItemIteratorImpl.(FileUploadBase.java:831) ~[tomcat-embed-core-8.5.28.jar:8.5.28] at org.apache.tomcat.util.http.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:256) ~[tomcat-embed-core-8.5.28.jar:8.5.28] at org.apache.tomcat.util.http.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:280) ~[tomcat-embed-core-8.5.28.jar:8.5.28] at org.apache.catalina.connector.Request.parseParts(Request.java:2869) ~[tomcat-embed-core-8.5.28.jar:8.5.28] at org.apache.catalina.connector.Request.parseParameters(Request.java:3216) ~[tomcat-embed-core-8.5.28.jar:8.5.28] at org.apache.catalina.connector.Request.getParameter(Request.java:1137) ~[tomcat-embed-core-8.5.28.jar:8.5.28]

On the client side, the request is sent with "multipart/form-data" as content-type.

How can I fix it ?

fileDownloaderService

upload(file) {
const formData = new FormData();
formData.append('file', file);
    const req = new HttpRequest('POST', this.urlUpload, file, {
      headers: new HttpHeaders({'Content-Type':'multipart/form-data'}),
      reportProgress: true
    });
    return this.http.request(req);
  }

app.component

  upload() {
     let file = this.generate_dummy_file(50000000);
     this.downloader.upload(file).subscribe( event => {
        if (event.type === HttpEventType.UploadProgress) {
        } else if (event instanceof HttpResponse) {
          console.log('File is completly uploaded!');
        }
      });


    }

  generate_dummy_file(size) {
    return new Blob([new ArrayBuffer(size)], {type: 'multipart/form-data'});
  };

And spring side

@PostMapping("/uploadFile")
    public UploadFileResponse uploadFile(@RequestParam("file") MultipartFile file) {
        return ...;
    }

Thanks for helping

Solution

Try this ,

 const formData = new FormData();
 formData.append("file", file);
 formData.append("reportProgress", true);

use httpclient,

 return this.httpclient.post(this.urlUpload, formData);

Answered By - Srinivasan Sekar
Answer Checked By - Gilberto Lyons (JavaFixing Admin)