CODEWITHSUNDEEP
node.jsangularmultipartform-datamulter
PARAMANANDA PRADHAN
PARAMANANDA PRADHAN

Reputation: 1169

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

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

Upvotes: 9

Views: 10841

Answers (3)

KARNAV PARGI
KARNAV PARGI

Reputation: 653

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

Upvotes: 0

Kamalakar
Kamalakar

Reputation: 415

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

Upvotes: 1

bertrandg
bertrandg

Reputation: 3207

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: enter image description here

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

Upvotes: 23

Related Questions