Load Binary file in Angular 5

Question

I am working in Angular 5 to integrate flatbuffers response with my API call. I am trying to load binary file using HttpClient in Angular 5.

I have tried below code to get byte data in Uint8Array. Also tried with Blob but its not working.

let apiUrl = "./assets/test.bin";
const headers = {
  headers: new HttpHeaders({responseType: "application/octet-stream"})
};

let data : Observable<Uint8Array> = this.http.get<Uint8Array>(apiUrl, headers);
data.subscribe( (response: Uint8Array) => {
  const data = response;
  // console.log(data); 
  console.log("successful");

  return data;
}, (error : HttpErrorResponse)=> {
  console.log(error.error.text);      
});

Binary file

FBS Generated TS file

score 0 · Answer 1 · answered May 16 '18 at 19:42

0

Try something like:

let apiUrl = "./assets/test.bin";
const headers = {responseType: "blob"};

let data : Observable<Blob> = this.http.get<Blob>(apiUrl, headers);
data.subscribe( (response: Blob) => {
  const data = response;
  console.log(data); 
}, (error : HttpErrorResponse)=> {
  console.log(error.error.text);      
});

answered May 16 '18 at 19:42

sabithpocker

15,274
1
42
75

Tried but not working.. Got this error: "Http failure during parsing for http://localhost:4201/assets/test.bin". – Nishant Shah May 17 '18 at 05:51
Agreed same problem here. This is trying to parse it as JSON. – David Findlay Aug 07 '19 at 23:37

score 0 · Answer 2 · answered Aug 14 '23 at 09:18

The answer provided by @sabithpocker would work if the header object was right. Because of the wrong header the angular http module parses it as an json. The correct header would look like:

const headers = {
  headers: new HttpHeaders({
     'Accept':'blob'
  }),
  'responseType': 'blob' as 'json'
 }

Load Binary file in Angular 5

2 Answers2