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);

Peracid

Answer 1

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.

Sergias

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

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

Yes, it works, it obtained automatically. – Cordie

Answer 2

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

Pembrook

Answer 3

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)));
  }
}

Schnapps