File upload is not a multipart request. Upload fails

Question

File upload code referred to from here.

Issue is that it sending request as json not as multipart form data, so the server side code rejects the request and upload fails.

Server side code is fine, I tried that from postman, it works !

This is the html part

<h1>Angular 10 FormData (multipart/data-form) Example</h1>
<div>
    <form [formGroup] = "uploadForm" (ngSubmit)="onSubmit()">      
      <div>
        <input type="file" name="profile" (change)="onFileSelect($event)" />
      </div>
      <div>
        <button type="submit">Upload</button>
      </div>
    </form>
  </div>

This is the component

onSubmit() {
    const formData = new FormData();
    formData.append('file', this.uploadForm.get('profile').value);

    this.http.post<any>(CommonConstants.env+"api/master/upload",formData).subscribe(
      (res) => console.log(res),
      (err) => console.log(err)
    );
  }

 onFileSelect(event) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.uploadForm.get('profile').setValue(file);
    }
  }

Once I uploaded, the network tab in chrome does not show Content-Type header in Request Headers.

The `Response Headers` are the ones you get back from the server. You want to look at the `Request Headers` to check which `Content-Type` it is using while posting. — Fullslack, Jul 25 '20 at 10:07
correct. In request header there is no content type. I had updated the question. — user630209, Jul 25 '20 at 10:15
I don't see the code where you set the `HttpHeaders` (if you set them at all). Take a look at the following post for a solution: https://stackoverflow.com/questions/45286764/adding-a-http-header-to-the-angular-httpclient-doesnt-send-the-header-why — Fullslack, Jul 25 '20 at 10:33
already tried. not working. this.http.post(CommonConstants.env+"api/master/upload", formData, {headers : new HttpHeaders({ 'Content-Type': 'multipart/form-data' })}).subscribe( — user630209, Jul 25 '20 at 10:43

score 0 · Answer 1 · answered Jul 25 '20 at 14:00

Reassigning the file to a Blob variable and passing it with the formData without the multipart header seems to be working for me. The header is deduced by the browser in this case.

Try Something like this:

onSubmit() {
    const formData = new FormData();
    blob:Blob=this.uploadForm.get('profile').value
    formData.append('file', blob);

    this.http.post<any>(CommonConstants.env+"api/master/upload", formData).subscribe(
      (res) => console.log(res),
      (err) => console.log(err)
    );
  }

score 0 · Answer 2 · answered Jul 25 '20 at 14:01

0

You need convert your file into blob and add type. First Store selected file this obj;

selectedFile: File = null;

and in your formData

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

answered Jul 25 '20 at 14:01

azer-p

304
1
12

File upload is not a multipart request. Upload fails

2 Answers2