firebase / firebase-js-sdk

Firebase Javascript SDK
https://firebase.google.com/docs/web/setup
Other
4.86k stars 894 forks source link

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

Open yolpsoftware opened 5 days ago

yolpsoftware commented 5 days ago

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:

https://github.com/facebook/react-native/commit/572dd76ba01bda58db75e5aabdc48cf5e5957fa7#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 commented 5 days ago

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