CODEWITHSUNDEEP
angularangular-httpclientangular-http
Lars
Lars

Reputation: 1092

How to POST Blob with Angular 9?

I'm trying to send a blob to my server, but it wont work. I'm using the doctemplater library which creates a Blob. This blob is correct because I'm able to save to local file (with saveAs(...)). But now I need to transfer this file to my server too.

let out = doc.getZip().generate({
    type: 'blob',
    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
});

So I'm trying

const data = {
    name: "test,
    content: out
}

this.http.post<any[]>(this.path, data).pipe(
    catchError((err: HttpErrorResponse) => {
        // ...
    })
);

The problem is that data['out'] is always empty on server side. So how can I send a blob to the server?

Upvotes: 1

Views: 5157

Answers (3)

Mohammed Aamier
Mohammed Aamier

Reputation: 188

In your service file create a post method

updateDistrictLogo(formdata: FormData): Observable<any> {
  return this.http.post<any>(
    this.constantService.getUrl(your API URL), formdata,
);
}

in your componen.ts file create a instance of service in constructor

   constructor(private ContactService: ContactInformationService) {}

then create a method and call api

 updatefile() {
  const formdata = new FormData();
        formdata.append("file", blob);
        this.ContactService.updateDistrictLogo(formdata).subscribe(
            success => {
               console.log(success);
            },
            error => {
           console.log(error);
         }
        );
   }

Upvotes: 0

r.asparuhov
r.asparuhov

Reputation: 1

try with

this.http.post<any[]>(path, data, { responseType: 'blob'})

Upvotes: -1

ng-hobby
ng-hobby

Reputation: 2199

Try using FormData like this:

const formData = new FormData();
formData.append(name, value, filename);

For more information visit this link.

Upvotes: 3

Related Questions