Support for blobs

[ma-pe]

Thanks for open sourcing your library! :)

Blob-support for react-native's fetch was introduced in 0.54:

facebook/react-native#11417
facebook/react-native#11573

Blobs doesn't seem to work with your library though:

var blob = new Blob();
pinnedFetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  body: blob,
  headers: {
    'Content-Type': 'application/octet-stream',
  },
  sslPinning: {[
    "my.certificate"
  ]},
})
.then(response => response.json())
.then(json => console.warn(json));

Leads to:

Exception '-[__NSDictionaryM dataUsingEncoding:]: unrecognized selector sent to instance 0x1c4239de0' was thrown while invoking fetch on target RNSslPinning with params (
    "https://jsonplaceholder.typicode.com/posts/1",
        {
        body =         {
            "_data" =             {
                blobId = "cc129bc0-f470-405f-80f8-2c115b404e76";
                lastModified = 1535620344891;
                offset = 0;
                size = 0;
                type = "";
            };
        };
        headers =         {
            "Content-Type" = "application/octet-stream";
        };
        method = PUT;
        sslPinning =         {
            certs =             (
                "my.certificate"
            );
        };
    },
    137
)

I need ssl pinning for all my request but haven't found a library featuring blob PUTs.

Any thoughts on how to support this?

[ajaysaini-sgvu]

Any update on this ?

[brunnorech]

Any update on this ? or other alternative ? other library ?

[canhtran10]

Any solution for this??? :(
it seems to work fine for Android. But with Ios, the exception thrown when i try to import fetch function:
import {fetch} from 'react-native-ssl-pinning';

2020-05-06 13:13:16.735 [fatal][tid:com.facebook.react.RNSslPinningQueue] Exception '-[NSNull dataUsingEncoding:]: unrecognized selector sent to instance 0x7fff80615710' was thrown while invoking fetch on target RNSslPinning with params ( ....

[MaxToyberman]

@canhtran10 can you show me an example of a request ? so i can check it/

[canhtran10]

HI @MaxToyberman thanks for your support:
Send to you the log & request:

ExceptionsManager.js:82 Exception '-[NSNull dataUsingEncoding:]: unrecognized selector sent to instance 0x7fff80615710' was thrown while invoking fetch on target RNSslPinning with params (
"https://domain.osloskoletest.no/api/settings",
{
body = "";
headers = {
authorization = "Bearer ACCESS_TOKEN";
"content-type" = "application/json";
};
method = GET;
sslPinning = {
certs = (
osloskoletest
);
};
timeoutInterval = 10000;
},
3115
)
callstack: (
0 CoreFoundation 0x00007fff23c4f02e __exceptionPreprocess + 350
1 libobjc.A.dylib 0x00007fff50b97b20 objc_exception_throw + 48
2 CoreFoundation 0x00007fff23c6ff94 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132
3 CoreFoundation 0x00007fff23c53dac forwarding + 1436
4 CoreFoundation 0x00007fff23c55f38 CF_forwarding_prep_0 + 120
5 Skolemelding 0x000000010356dba8 -[RNSslPinning fetch:obj:callback:] + 1992
6 CoreFoundation 0x00007fff23c561cc invoking + 140
7 CoreFoundation 0x00007fff23c532df -[NSInvocation invoke] + 319
8 CoreFoundation 0x00007fff23c537e4 -[NSInvocation invokeWithTarget:] + 68
9 Skolemelding 0x000000010369ec32 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 2658
10 Skolemelding 0x0000000103738e87 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 791
11 Skolemelding 0x0000000103738993 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 131
12 Skolemelding 0x0000000103738909 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 25
13 libdispatch.dylib 0x00007fff519dd848 _dispatch_call_block_and_release + 12
14 libdispatch.dylib 0x00007fff519de7b9 _dispatch_client_callout + 8
15 libdispatch.dylib 0x00007fff519e4526 _dispatch_lane_serial_drain + 707
16 libdispatch.dylib 0x00007fff519e4f5c _dispatch_lane_invoke + 388
17 libdispatch.dylib 0x00007fff519eeff9 _dispatch_workloop_worker_thread + 626
18 libsystem_pthread.dylib 0x00007fff51c00a3d _pthread_wqthread + 290
19 libsystem_pthread.dylib 0x00007fff51bffb77 start_wqthread + 15
)

The Code:

async userProfile(accessToken) {
     const response = await fetch(Config.API_BASE_URI + '/api/settings', {
         method: 'GET',
         headers: this.makeHeaders(accessToken),
         body: null,
         timeoutInterval: 10000,
         sslPinning: {
             certs: ["osloskoletest"]
         }
     });
    
     return response;
 }

 makeHeaders(accessToken) {
     return {
         'Authorization': 'Bearer ' + accessToken,
         'Content-Type': 'application/json',
     };
 }

[MaxToyberman]

@canhtran10 how is it related to Blobs ?

[canhtran10]

@MaxToyberman, ah sorry :), I don't know this problem related to the Blobs or not, but the error message was the same.

[MaxToyberman]

@canhtran10 remove the body: null, in GET you shouldn't add body

[MaxToyberman]

@ma-pe @ajaysaini-sgvu @brunnorech can you provide some example ? how do you expect to receive the data in your backend ?

[soufian97]

Hi, I've also this problem you can find below what I'm expecting from my back end :

{« _bodyBlob": {"_data": {"__collector": [Object], "blobId": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX", "name": "XXXXX-XXXX-XXXX-XXXXX-XXXXXXXXXXXX.png", "offset": 0, "size": 34249, "type": "image/png"}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX", "name": "XXXXX-XXXX-XXXX-XXXXX-XXXXXXXXXXXX.png", "offset": 0, "size": 34249, "type": "image/png"}}, "bodyUsed": false, "headers": {"map": {"access-control-allow-credentials": "true", "access-control-allow-headers": "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Location, HEADER_PARAM", "access-control-allow-methods": "POST, GET, OPTIONS, DELETE, PATCH, PUT", "access-control-allow-origin": "https://test.com", "access-control-expose-headers": "Location", "access-control-max-age": "3600", "cache-control": "no-cache, no-store, max-age=0, must-revalidate", "cf-cache-status": "DYNAMIC", "cf-ray": "xxxxxxxxxxxxxxxxx-MAD", "cf-request-id": "0393939393993939384849393939399", "content-length": "34249", "content-security-policy": "default-src 'self' http: https: data: blob: 'unsafe-inline'", "content-type": "image/png", "date": "Wed, 03 Mar 2021 13:16:15 GMT", "expect-ct": "max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\"", "expires": "0", "nel": "{\"report_to\":\"cf-nel\",\"max_age\":604800}", "pragma": "no-cache", "referrer-policy": "no-referrer-when-downgrade", "report-to": "{\"group\":\"cf-nel\",\"max_age\":604800,\"endpoints\":[{\"url\":\"https:\\/\\/a.nel.cloudflare.com\\/report?s=SD8F7S8DF87DSF8SD7SDS%SDFSD87FDSSDFSDF7SD7F7S7DFSDF9SDGS%2B%3HDSSDF7SD8FD8F7SDFSDF87SDF%2FO%FSD80FSD9%SDF98SDF\"}]}", "server": "cloudflare", "strict-transport-security": "max-age=31536000", "x-content-type-options": "nosniff, nosniff", "x-frame-options": "DENY, SAMEORIGIN", "x-xss-protection": "1; mode=block, 1; mode=block"}}, "ok": true, "status": 200, "statusText": undefined, "type": "default", "url": "https://test.com/api/v1/file-store/7ddndnd-7hdh-77D7-XXXX-D7D77D7DD"}

[xhirazi]

Passing any type other than string in body causing me this error.

Any solution?

[WassimHakim]

Facing the same issue. Anyone managed to solve it?

[xhirazi]

@WassimHakim try JSON.stringify(body)

[haripatel-mobio]

Any update on this ?
We use this react-native-ssl-pinning -> fetch, From API getting normal data response instead of blob response.

fetch(API_URL)
.then((response) => {
    return response.blob()
})
.catch(error => {
    console.log(`error: ${error}`);
})

Require to get blob response, From server side return file(PDF, Image, etc.) object in api response.