React-native: Support for Data Blobs?

[austinksmith]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

All

Steps to Reproduce

Create a React Native application and attempt to create a data blob, error is created saying a "Blob can only be created from another Blob".

Expected Behavior

A data blob is created the same as it works for all other JavaScript execution environments

Actual Behavior

Support for data blobs appears broken with an error message of "Data blob can only be created from another blob"

Reproducible Demo

You may make use of my library Hamsters.js to see this in action, simply follow the instructions to import the library into a React Native application. A user of my library has reported this bug to me and I would really like to see support for my library brought back as it relies on data blob creation for efficient operation, the alternatives are bad for performance.

https://github.com/austinksmith/Hamsters.js/issues/40

[austinksmith]

Any response on this? Curious on how to create new data blobs in RN

[shoebmogal]

I am experiencing the same issue. Curious to know the work around.

[edi]

Same thing here. Was just trying to upload some files with Firebase Storage in a react native app, used RNFS to get the actual file, all works fine, but when I actually try and upload it, this errors pops up, and I guess Firebase uses this type of blob ( out of base64 strings ) as well ..

[jsappme]

same thing in here, it used to work with the previous react native version.

[serhiipalash]

@EduardJS I have the same error. Did you find a solution?

[edi]

Hello gents, and Yes. I have worked around the lack of support for Blob in RN by using RNFetchBlob ( react-native-fetch-blob ). Getting assets-library data via react-native-camera-roll-picker

const imageRef = storage
    .ref( user.objectId )
    .child( `messages/${conversation.roomId}/${Date.now()}.jpg` )

Blob.build( RNFetchBlob.wrap( URI_FROM_PHOTO_PICKER ), { type: 'application/octet-stream' })
    .then( blob => {

        imageRef
            .put( blob, { contentType: 'application/octet-stream' })
            .then( () => {
                blob.close()
                return imageRef.getDownloadURL()
            })

    })

Hope it helps :)

[serhiipalash]

@EduardJS thanks for your help! Unfortunately, this does not work in my situation. We use Expo and I can not add response-native-fetch-blob to the project.

I guess the only thing we can do is use some cloud function that will get base64 string, convert it into byteArray and store in Firebase.

[edi]

@serhiipalash Hello. Sorry to hear that. Firebase also supports putString ( base64 ) but it can't create a blob inside RN enviroment since it's actually developed for web browsers.

[jsappme]

also using expo and still no solution

this issue is blocking us to release our app to production

[serhiipalash]

@EduardJS Hi! I tried putString last week and it does not work.

[serhiipalash]

this issue is blocking us to release our app to production

+1

[serhiipalash]

also using expo and still no solution

I will write here solution with cloud function if it will work.

[edi]

Yea, because firebase uses Blob support from the browser … hence the need for a polyfill ( which RNFetchBlob provides ). Only solution for you is to find a polyfill that works, for Blob support, in Expo ( can’t help with that though ).

As for waiting for an improvement, don’t get your hopes up :)

On 17 Oct 2017, at 23:26, Serhii Palash [e-mail] wrote:

@EduardJS https://github.com/eduardjs Hi! I tried putString last week and it does not work.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/16034#issuecomment-337376420, or mute the thread https://github.com/notifications/unsubscribe-auth/AHWwZRfyaTVzE8NuV2DkgajexJMzYSBtks5stRt6gaJpZM4Pd40v.

[serhiipalash]

As for waiting for an improvement, don’t get your hopes up

😄

The speed of adding new features in RN is very slow compared to the normal React world. It was a big surprise for me when I started working with RN.

[dbadeveloping]

Getting same issue on a 64-Bit Android emulator. Using 32-Bit now an everything works as expected.

[dantman]

@EduardJS thanks for your help! Unfortunately, this does not work in my situation. We use Expo and I can not add response-native-fetch-blob to the project.

RNFB is also not really an option for many projects even when they're not using Expo.

That library has some critical issues regarding how it handles things from document providers on Android:
https://github.com/wkh237/react-native-fetch-blob/issues/525

[edi]

Hei Daniel! I can only hope for official support then. I only deal with an
iOS app, so I’m covered
On Thu, 19 Oct 2017 at 04:52, Daniel Friesen [e-mail]
wrote:

@EduardJS https://github.com/eduardjs thanks for your help!
Unfortunately, this does not work in my situation. We use Expo and I can
not add response-native-fetch-blob to the project.

RNFB is also not really an option for many projects even when they're not
using Expo.

That library has some critical issues regarding how it handles things from
document providers on Android:
wkh237/react-native-fetch-blob#525
https://github.com/wkh237/react-native-fetch-blob/issues/525

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/16034#issuecomment-337784815,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHWwZSFrzW9Db1k5_jxjipwUK5VAFr1jks5strlmgaJpZM4Pd40v
.

[kelset]

As far as I know there's an open PR to add this functionality: https://github.com/facebook/react-native/pull/11573

[wcandillon]

@serhiipalash did you end writing that cloud function?

[karimraoudy]

@serhiipalash did you end writing that cloud function? i'm realy stuck .Thank You

[wcandillon]

@serhiipalash @karimraoudy I wrote a cloud function for this: https://medium.com/@wcandillon/uploading-images-to-firebase-with-expo-a913c9f8e98d

[karimraoudy]

@wcandillon I did saw your post but didn't understand how to implant in my code. thank you for your reply

[TizioFittizio]

I'm experiencing this too, tried base64, base64url and blob with no luck

[pablo-albaladejo]

@wcandillon Thank you very much for sharing your solutions. Worked like a charm for me!

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}