Search code examples
angularfilepostfile-uploadimage-upload

send an Image file in the body of a http post request in Angular 8

This is the object I try to add in the body

firebaseId: "gSECLs1cH9epvlIXX85yx820Tvt2" Instructions: undefined category: "votes" Imageone: File {name: "21.jpg", lastModified: 1524755773798, lastModifiedDate: Thu Apr 26 2018 20:46:13 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 171456, …} TaskMadeDate: Mon Feb 03 2020 11:10:29 GMT+0530 (India Standard Time) {} Approved: false

This is the object that goes with post request

firebaseId: "gSECLs1cH9epvlIXX85yx820Tvt2" category: "votes" Imageone: {} TaskMadeDate: "2020-02-03T05:40:29.943Z" Approved: false

Imageone becomes empty.

This is my post method

return this.http.post(this._baseUrl + url, data) .pipe( tap((res) => console.log(added = ${res})), catchError(this.handleError('post')) );

Solution

  • You are sending file in regular request instead of that use form data to pass file like this : 

    var formData = new FormData()
formData.append('firebaseId',this.firebaseId);
formData.append('imageone',this.imageone);

    add all your data like this and if you still not getting file in your backend then add this in your request headers.

    'Content-Type': 'application/x-www-form-urlencoded'