How to post multipart/form-data from Angular to Nodejs Multer?

Question

From Angular I want to upload a image as Blob data to nodeJS server. The server uses multer in the backend. The image file is generated by canvas render. I am getting the following error from the server:

Error: Multipart: Boundary not found status:500

The following is my code. Please help me to find out the issue.

Angular:

// blob:Blob;   ->  it has valid image data.
var formData: FormData = new FormData();
formData.append('banner', blob, "my-file.png")

this.http.post(url,
    formData, { headers: new Headers({ 'Content-Type': 'multipart/form-data' }) })
    .toPromise()
    .then(res => {
      console.log(res);
      return res.json();
    })
    .catch(this.handleError);

nodejs:

router.post('/upload-banner-image', bannerImageUpload.single('banner'), watchfaceController.uploadWatchfaceBannerImage);

bertrandg · Accepted Answer · 2017-07-03 10:41:44Z

23

Remove your 'Content-Type': 'multipart/form-data' header and it should work.

I got the same error, this is due to the missing boundary=.. just after multipart/form-data like the following working request:

When you remove your header, browsers will add it automatically with the boundary=.. and it works.

answered Jul 3, 2017 at 10:41

bertrandg

3,2372 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Takatalvi Over a year ago

This will work with any modern browser? or is this part of the Angular htttpClient?

divine Over a year ago

angular automatically sends the contentType: multipart/form-data ?

Zaki Mohammed Over a year ago

Yes, it works, it obtained automatically.

Kamalakar · Accepted Answer · 2021-01-29 08:36:34Z

1

Add Content-Type': 'file' in header and it should work

answered Jan 29, 2021 at 8:36

Kamalakar

4454 silver badges9 bronze badges

Comments

KARNAV PARGI · Accepted Answer · 2024-03-31 06:19:51Z

When you are using interceptor in angular you can make use of this code snippet

UploadFileService.ts

 uploadFile(file: File) {
    const formData: FormData = new FormData();
    formData.append('file', file);

    return this.http.post<any>(`${this.api}/${this.apiName}`, formData);
  }

http.interceptor.ts

export class APIInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler) {
    let authReq;
    if (request.method === 'POST' && request.body instanceof FormData) {
      authReq = request.clone({
        setHeaders: {
          Authorization: `Bearer ${this.auth.getToken()}`,
        },
      });
    } else {
      authReq = request.clone({
        setHeaders: {
          'Content-Type': 'application/json; charset=utf-8',
          Accept: 'application/json',
          Authorization: `Bearer ${this.auth.getToken()}`,
        },
      });
    }
    return next.handle(authReq).pipe(catchError((err) => this.handleAuthError(err)));
  }
}

Collectives™ on Stack Overflow

How to post multipart/form-data from Angular to Nodejs Multer?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related