How to POST Blob with Angular 9?

Question

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?

What do you mean by data['out'] is empty?

Piyush
– Piyush

2020-09-01 08:14:21 +00:00
Commented Sep 1, 2020 at 8:14 — Piyush
– Piyush, Commented Sep 1, 2020 at 8:14

ng-hobby · Accepted Answer · 2020-08-31 09:15:52Z

3

Try using FormData like this:

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

For more information visit this link.

answered Aug 31, 2020 at 9:15

ng-hobby

2,2092 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammed Aamier · Accepted Answer · 2020-09-01 07:42:30Z

0

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

answered Sep 1, 2020 at 7:42

Mohammed Aamier

1887 bronze badges

Comments

r.asparuhov · Accepted Answer · 2020-09-01 07:07:40Z

-1

try with

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

answered Sep 1, 2020 at 7:07

r.asparuhov

1

Collectives™ on Stack Overflow

How to POST Blob with Angular 9?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related