'Expo application on iOS crashes when uploading video to Firebase Storage. Works on android, just not iOS
I am trying to upload a video to firebase storage on iOS. Android works just fine. Here is the code causing it (there are comments in the code to show when it crashes). Also, I am using my own iPhone to test this, not a simulator.
export const mediaUpload = async (imageObject) => {
// getting blob from a local file a user uploads from ImagePicker
const blob = await fetch(imageObject[0].uri);
const blobObject = await blob.blob();
// creating reference path in storage
const fileRef = ref(storage, `${auth.currentUser.uid}/videos/${uuid.v4()}`);
// ----- no crash so far... -------
// this is the issue line
const attemptToUpload = await uploadBytes(fileRef, blobObject);
// ------> APP CRASHES
}
On Android, this works with both images and videos. On iOS, images work but videos will crash the app completely. The blob type is video/quicktime. Why does uploadBytes method crash the app?
EDIT: The answer was that Firebase v9 seems to not be compatible with Expo on dealing with video uploads to storage 100%. Even android hangs on video uploads without any error message I found out. The way I solved this was to go back to version Firebase 8.10.0. This works 100%.
Solution 1:[1]
I think it's a known issue on the ios platform when body is just a blob. I ran into the same problem a few weeks ago and I fixed it by sending it to my backend and then uploading to the service that requires it.
Solution 2:[2]
I also faced the same issue, on firebase version 9.6.5, while uploading image, so i have used function uploadBytesResumable instead of uploadBytes, it works just fine, if it is urgent you can use that function for the time being, just a recommendation, for reference:- https://firebase.google.com/docs/storage/web/upload-files
I faced this issue in iOS 15 and 15 + only, rest below iOS 15 and in android apps uploadBytes is working fine.
When using XMLHttpRequest with uploadBytesResumable, first time image uploads smoothly on iOS 15.2 then, on uploading it on second time there is crash while uploading image. To avoid it use,
const img = await fetch(image_url);
const blob = await img.blob();
So if you face any issue while uploading image then use this approach, for creating blob file
if you need reference of code, i have answered another question here of image upload error(firestorage), React Native expo image picker upload image to firebase storage (v9) crash
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | TheWhiteFang |
| Solution 2 |
