Reponse type of 'blob' not supported on HttpClient

@BeMor81

From @BeMor81 on February 15, 2018 17:11

Dear friend, we, the rest of the NativeScript community really
appreciate your feedback! While we are doing all we can to take care of every
issue, sometimes we get overwhelmed. Because of that, we will consider issues
that are not constructive or problems that cannot be reproduced "dead".
Additionally, we will treat feature requests or bug reports with unanswered
questions regarding the behavior/reproduction for more than 20 days "dead". All
"dead" issues will get closed.

Please, provide the details below:

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo? Yes

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital
Reponse type of 'blob' not supported on HttpClient
letter.

Which platform(s) does your issue occur on?

iOS/Android/Both
Tested just on Android

Please provide the following version numbers that your issue occurs with:

CLI: (run tns --version to fetch it) 3.4.2
Cross-platform modules: (check the 'version' attribute in the
node_modules/tns-core-modules/package.json file in your project)
Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
package.json file of your project) 3.4.0
Plugin(s): (look for the version number in the package.json file of your
project)

Please tell us how to recreate the issue in as much detail as possible.

The best approach would be to get your code running in the NativeScript Playground and share the link with us, along with any additional details or steps to reproduce needed for examining the issue there.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Getting the following error when running the following service below.

import { Injectable } from "@angular/core";
import { HttpParams, HttpClient, HttpHeaders, HttpResponse, HttpClientJsonpModule } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/map";

import { Config } from "../config";

@Injectable()
export class ImageLoaderService {
constructor(private http: HttpClient) {}

loadImage(imgUrl) {
this.http.get(
imgUrl, { responseType: 'blob' }
).subscribe();
}
}

Copied from original issue: NativeScript/NativeScript#5427

@BeMor81

Hi @BeMor81,

Thank you for contacting us.
Try to set up the request header as it is shown in our SDK example, where you should set the Content-Type to blob.

If the issue is still reproducible, please provide some more info about the problem as well as a sample project, which could be used for debugging.

Still the same unfortunatley. Please find link to example below.

https://github.com/BeMor81/Nativescript-Test-Blob

Full error details returned

JS: "zoneAwareStack": "Error: Response type of 'blob' not supported.\n at XMLHttpRequest.set [as responseType] (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/tns-core-modules/xhr/xhr.js:200:23) [angular]\n at Observable._subscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/@angular/common/bundles/common-http.umd.js:2195:34) [angular]\n at Observable._trySubscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Observable.js:172:25) [angular]\n at Observable.subscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Observable.js:160:93) [angular]\n at Object.subscribeToResult (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/util/subscribeToResult.js:23:27) [angular]\n at MergeMapSubscriber._innerSub (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/operators/mergeMap.js:132:38) [angular]\n at MergeMapSubscriber._tryNext (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/operators/mergeMap.js:129:14) [angular]\n at MergeMapSubscriber._next (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/operators/mergeMap.js:112:18) [angular]\n at MergeMapSubscriber.Subscriber.next (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Subscriber.js:90:18) [angular]\n at ScalarObservable._subscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/observable/ScalarObservable.js:49:24) [angular]\n at ScalarObservable.Observable._trySubscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Observable.js:172:25) [angular]\n at ScalarObservable.Observable.subscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Observ
JS: able.js:160:93) [angular]\n at MergeMapOperator.call (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/operators/mergeMap.js:87:23) [angular]\n at Observable.subscribe (file:///data/data/org.nativescript.TestBlob/files/app/tns_modules/rxjs/Observable.js:157:22) [angular]"

@BeMor81

Hi guys!, I´m experiencing the same issue!, @BeMor81 did you find a fix or a workaround?

@BeMor81

Hi @BeMor81 @adriangarzas,
I have just tested the @BeMor81's project and was able to recreate the issue.
We will investigate what is causing this problem and will provide more info on it.

It has not been solved?

@alexma01

Hi @alexma01,
This is still a valid issue. Regarding that, any PR which provides a fix will be highly appreciated. For further info, you could review our contributing guidelines..

+1. Facing the same issue even today :(

The workaround I found for this (how to request binary files, async, with built-in networking library) was to avoid HttpClient and use Http.

const httpModule = require("http");

httpModule.getImage(myPath);

getImage returns a Promise<ImageSource> which can be incorporated into your Angular service, translated to Observer, etc.

Basically, skip the rudimentary Blob handling and use a pre-made binary/image request procedure. Other methods available on the (NativeScript Http module)[https://docs.nativescript.org/ns-framework-modules/http]:

getString
getJSON
getImage
getFile
request

No need for low level Blob handling. I hope that is a useful workaround.

@yoat

Hi @yoat That works unless there's a reason you want to use HttpClient such as the implementation of a HttpInterceptor which isn't picked up via getImage unfortunately. I'm sure this will be a good work around for many though.

@tsonevn

+1 from t.1344240

@tsonevn @BeMor81 @adriangarzas @alexma01 @yoat marking the issue as a feature (and not bug) as the requested functionality was not supported (and this is why the related message was printed Response type of 'blob' not supported.).

As @DickSmith pointed out a possible solution is to introduce the blob type in the XHR module

export var blob= "blob";

And then with repacked tns-core-modules to re buiold the app and make a HEAD request:

this.http.head(apiUrl).subscribe((res: HttpResponse<Blob>) =>
  if (res) {
    // proceed with the data e.g. using res.url to create an image via the `fromUrl` method

Still, the Blob support needs full & proper and tested implementation in the HTTP module so it would work in the HttpClient for Angular base applications. All suggestion and contributing PRs are welcomed.

Related to this feature reques.
Partial but not complete implementation of blob is introduced in the fetch module

+1

until this is fixed, and since I'm using a library for API CodeGen, so I can't easily change the implementation, I ended up using this one...
blob-polyfill

Navigation Menu

Repository navigation

Reponse type of 'blob' not supported on HttpClient #1202

Please, provide the details below:

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo? Yes

Tell us about the problem

Which platform(s) does your issue occur on?

Please provide the following version numbers that your issue occurs with:

Please tell us how to recreate the issue in as much detail as possible.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Reponse type of 'blob' not supported on HttpClient #1202

Description

Please, provide the details below:

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo? Yes

Tell us about the problem

Which platform(s) does your issue occur on?

Please provide the following version numbers that your issue occurs with:

Please tell us how to recreate the issue in as much detail as possible.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Activity

tsonevn commented on Feb 16, 2018

BeMor81 commented on Feb 16, 2018

BeMor81 commented on Feb 16, 2018

adriangarzas commented on Mar 12, 2018

tsonevn commented on Mar 12, 2018

alexma01 commented on Mar 14, 2018

tsonevn commented on Mar 15, 2018

shahidbits commented on Aug 2, 2018

yoat commented on Aug 2, 2018

BeMor81 commented on Aug 2, 2018

NickIliev commented on Sep 28, 2018

marablec commented on Dec 13, 2018

seveneye commented on Apr 5, 2019

pmoelgaard commented on Jun 7, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions