Cannot upload files to Firebase Storage on React Native >= 0.74

[yolpsoftware]

Operating System

iOS 18.1

Environment (if applicable)

React Native

Firebase SDK Version

11.0.2

Firebase SDK Product(s)

Storage

Project Tooling

Expo "managed"

Detailed Problem Description

Our app uses the following Firebase API to upload files to Firebase Storage:

const json = '{ "string contents": "of file" }';
await uploadString(ref(getStorage(), `path/to/file.ext`), json);

This worked great for ages, when we were using React Native 0.73 or lower.

Now we are in the process of migrating to React Native 0.76.2, and we are getting the following error:

Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported

We tried also other formats: instead of submitting the string as a "raw" string, we used Base-64 and other formats, but the problem stays the same.

The reason can be found at line 70 of BlobManager.js:

https://github.com/facebook/react-native/blame/0.74-stable/packages/react-native/Libraries/Blob/BlobManager.js#L70

This was introduced in the following React Native commit:

facebook/react-native@572dd76#diff-d90bf9c36a3b4e757871f537b020b4e9e58c5997955d2fb250d467a51fd39e87R71

There is an obvious workaround, but when I tried it, the app crashed with a native crash. Not sure if related. But if anyone encounters this problem, maybe this workaround is worth a try:

const blob = new Blob([json], {
  type: "application/json",
});
await uploadBytes(ref(getStorage(), `path/to/file`), blob);

Steps and code to reproduce issue

In a React Native 0.76 app, upload a string to Firebase Storage, using uploadString:

const json = '{ "string contents": "of file" }';
await uploadString(ref(getStorage(), `path/to/file.ext`), json);

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[Nantris]

I'm seeing this suddenly occurring on Electron. I can't imagine how uploadString could be so troublesome... It outright crashes the renderer process.

[dlarocque]

@Nantris Can you create a new issue in this repo describing the issue you're seeing?

[yolpsoftware]

@dlarocque any update on my issue? Can you reproduce it?

[Nantris]

My issue turns out to be some sort of chromium bug with atob that I'll need to report :(

[dlarocque]

Hi @yolpsoftware, as of 2019, we don't support uploading files in React Native. See Supported environments for the Firebase JavaScript SDK.

[yolpsoftware]

as of 2019

uh, was it supported before 2019? 🤷🏻‍♂️

[Nantris]

Sort of insane to not support uploads. Support a platform or don't.

[dlarocque]

as of 2019

uh, was it supported before 2019? 🤷🏻‍♂️

I don't believe there was a list of explicitly supported environments/features before 2019. The page I linked was first written in 2019, and since then it has said that storage uploads in RN are not supported.

I suggest submitting an idea supporting storage uploads in RN to UserVoice, where it can gain attention and be prioritized accordingly.

[deelaws]

@dlarocque , is there any plans to provide that support in future? Do you recommend using react-native-firebase/storage instead?

[dlarocque]

@deelaws

@dlarocque , is there any plans to provide that support in future?

We don't have any plans to support uploads in React Native.

Do you recommend using react-native-firebase/storage instead?

Yes, react-native-firebase is what our team recommends for React Native users. We do understand that this is a challenge for Expo users given the issues with Expo Go (https://docs.expo.dev/guides/using-firebase/#caveats-1, https://rnfirebase.io/#expo). "React Native Firebase cannot be used in the pre-compiled Expo Go app because React Native Firebase uses native code that is not compiled into Expo Go."