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

Answer 1

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

Answer 2

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.