instanceof vs constructor.name

Question

Back story:
Currently, We are getting image from GET api

Accept: 'application/octet-stream',
responseType: 'blob'

and we use below method to show image on UI.

let imageUrl = URL.createObjectURL(data);

Now this way, it works fine at almost all the places in Chrome (Windows and MAC) but at one place in Safari it gives an error response like.

"Response is not a Blob."

While debugging, we found out that we are getting this error from Angular.

case 'blob':
return res$.pipe(map((res) => {
    // Validate that the body is a Blob.
    if (res.body !== null && !(res.body instanceof Blob)) {
        throw new Error('Response is not a Blob.');
    }
    return res.body;
}));

When i check the

res.body instanceof Blob // true in chrome but in safari its false

next thing i try to debug in Safari

res.body.constuctor.name where I get a response like "Blob"

So my question is

How i can figure out what is output of instanceof value?

Answer 1

Use this instead

return this.http.get(url, { responseType: 'blob', observe: 'response' }
).pipe(map((res: any) => {
      return URL.createObjectURL(res.body);
}));

The key here is observe: 'response'. Safari broswer or iOS is mess sometimes and this will work no matter which browser you are using. Use this approach for dealing with images only