Expo application on iOS crashes when uploading video to Firebase Storage. Works on android, just not iOS

user_17400873 0
Viewed 810

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%.

expo firebase react-native javascript ios
4 Answers

Using this approach and works well on iOS 15.


 const videoRef = firebase.storage().ref("video/filename");

  const metadata = { contentType: "video/mp4" };

  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.onload = function () {
      resolve(xhr.response);
    };

    xhr.ontimeout = function (e) {
      // XMLHttpRequest timed out. Do something here.

      console.log(e);
    };
    xhr.onerror = function (e) {
      console.log(e);

      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", fileUri, true);
    xhr.timeout = 1000 * 60;
    xhr.send(null);
  });


  var uploadTask = videoRef.put(blob, metadata);

 

  uploadTask.on(
    "state_changed",
    (snapshot) => {
      // Observe state change events such as progress, pause, and resume
      // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
      const progress = snapshot.bytesTransferred / snapshot.totalBytes;

    

      switch (snapshot.state) {
        case firebase.storage.TaskState.PAUSED: // or 'paused'
          console.log("Upload is paused");
          break;
        case firebase.storage.TaskState.RUNNING: // or 'running'
          console.log("Upload is running");
          break;
      }
    },
    (error) => {
      console.log(error);

      // Handle unsuccessful uploads
      blob.close();
    },
    () => {
      // Handle successful uploads on complete
      // For instance, get the download URL: https://firebasestorage.googleapis.com/...
      uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {


console.log("Video file save at:",downloadURL)
       
      });
      blob.close();
    }
  );
user_124315760

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.

user_78661380

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

user_149991050

So, I spent like 10 hrs with the same problem. Solved with this:

const img = await fetch(image_url);
const blob = await img.blob()
const newFile = new File([blob], `${any_name_you_want}.jpeg`, {
         type: 'image/jpeg',
})

Then send this file instead of Blob

user_195881870
Related