React Native Expo ImagePicker --> Blob --> Firebase Storage not uploading

Question

Goal:

Select an image from local storage (IOS emulator) using Expo ImagePicker and upload it to Firebase storage

Console output:

Upload is 0% done
Upload is running

But it gets stuck there, image doesn't get uploaded

First I call this function to choose an image from local storage and retrieve blob, the image displays fine on the screen, I get an error if I try to console log the blob saying it can't be shown which I'm guessing is because its a blob

 async function pickImage() {

    result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true, 
      aspect: [4, 3],
      quality: 1,
    }); 

    if (!result.cancelled) {
      let imageFile = await fetch(result.uri);
      let imageBlob = await imageFile.blob()
      setBlob(imageBlob)
    }
  }

then I attempt to upload to Firebase storage:

 function uploadToFirebase(){ 

    const storageRef = ref(storage, 'anything.jpg');
    const uploadTask = uploadBytesResumable(storageRef, blob);

    uploadTask.on('state_changed',
  (snapshot) => {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    setImageProgress((snapshot.bytesTransferred / snapshot.totalBytes) * 100)
   
    console.log('Upload is ' + imageProgress + '% done');
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused');
        break;
      case 'running':
        console.log('Upload is running');
        break;
    }
  }, 
  (error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/unauthorized':
        // User doesn't have permission to access the object
        break;
      case 'storage/canceled':
        // User canceled the upload
        break;

      // ...

      case 'storage/unknown':
        // Unknown error occurred, inspect error.serverResponse
        break;
    }
  }, 
  () => {
    // Upload completed successfully, now we can get the download URL
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      console.log('File available at', downloadURL);
      setLoadedImage(downloadURL)
    });
  }
);


  }

I've tried every iteration of this I could find online but to no avail

Answer 1

I had the same problem. After searching from different topics I've found an answer. The code below uploads the image to Firebase Storage

   const uploadToFirebase = async () {
    const id = 101;
    // this is the id of the file or you can name it
   const filename = `${id}`;

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

    // on load
    xhr.onload = function () {
    resolve(xhr.response);
};
    // on error
    xhr.onerror = function (e) {
    console.log(e);
    reject(new TypeError("Network request failed"));
};
    // on complete
    xhr.responseType = "blob";
    xhr.open("GET", pickImageResult.uri, true);
    xhr.send(null);
});

// a reference that points to this 'userphoto/101' location 
const fileRef = ref(getStorage(), 'usersphoto/${filename}');
// upload the 'blob' (the image) in the location refered by 'fileRef'
const result = await uploadBytes(fileRef, blob);

// We're done with the blob, close and release it
blob.close();

 }

Note: pickImageResult.uri is the image result from ImagePicker.launchImageLibraryAsync();