React-native-fetch-blob: How to get the blob data.

[shirleycharlin]

Hi!

Can I know how do I get the blob image data? Or do I need to translate the RNfetchBlob that is wrapping the local uri of the image to a blob data?

Thanks in advance!

[wkh237]

Hi @shirleycharlin , do you mean you want to create a Blob from an image in file system ?

const Blob = RNFetchBlob.polyfill.Blob

// create Blob using file path like '/data/foo/bar/img.png'
Blob.build(RNFetchBlob.wrap(path_of_the_image), { type : 'image/png' })
       .then((blob) => { ...  })

// create Blob using base64 encoded string 
Blob.build(base64_encoded_string_data, { type : 'image/png;BASE64' })
       .then((blob) => { ...  } )

Be sure to close() the blob when it's no longer needed.

More information

[ghost]

This is not working. I tried with following code. None of the console is called. Am I making some mistake here?

const rnfbURI = RNFetchBlob.wrap(image.path);
      Blob
        .build(rnfbURI, { type : 'image/png;' })
        .then((blob) => {
          console.log("then called");
        }).catch(
        function(reason) {
            console.log('Handle rejected promise ('+reason+') here.');
        });

[wkh237]

Hi @jo2010 , I think I need more information

• What does image.path looks like ?
• Does the file exists at path image.path ?

[ghost]

@wkh237 Yes, path exist. Path value of image.path is "file:///data/user/0/com.myapp/cache/75fb85f6-561a-405e-a3d8-8c3feec1a0ee.jpg"
I'm able to render the image using this path in react native Image component.

[wkh237]

Thank you @jo2010 , I think you can try to remove the URI scheme prefix file://, our file system API only recognize the following URI at this moment

• RNFetchBlob-file:// (the one RNFetchBlob.wrap() adds for your path)
• asset://
• asset-library:// (usually comes from IOS CameraRoll)
• content:// (usually comes from Android CameraRoll)

[ghost]

@wkh237 Thanks a lot. The then part is called now.