How to solve Firebase Storage: Invalid URL when trying to upload and image react native

Question

I am trying to upload an image to firebase storage, the problem is I get Firebase Storage: Invalid URL when I try to upload it.

First I get the uri from the react-native-image-picker then I use it to make the reference. This is my code:

export async function uploadImage() {
    const options = {
        storageOptions: {
          path: "images",
          mediaType: "photo"
        },
        includeBase64: true
      }
      const result = await launchImageLibrary(options);
      const imagePath = result.assets[0].uri
      console.log(imagePath)
  
      //firebase
      const imageRef = ref(storage, imagePath);
    
      const snapshot = await uploadBytes(imageRef, file, {
        contentType: "image/jpeg",
      });

      console.log("uploaded!")
}

this is the uri printed by the console.log:

file:///data/user/0/com.chatapp/cache/rn_image_picker_lib_temp_f85b1089-267f-4271-9ccb-2f1487d83619.jpg

Answer 1

while uploading any to firebase storage

• you should have permission to upload the file.
• what do you want to upload the file or any Base64 content

const uploadImage = async () => {
    const options: ImageLibraryOptions = {
      storageOptions: {
        path: 'images',
        mediaType: 'photo',
      },
      includeBase64: true,
    };
    const result = await launchImageLibrary(options);
    if (result) {
      const {assets} = result;
      if (assets && assets.length > 0) {
        try {
          const imagePath = result.assets[0].uri;
          console.log(imagePath);

          //firebase
          const reference = storage().ref('black-t-shirt-sm.png');

          const imageRef = await reference.putFile(imagePath, {
            contentType: 'image/jpeg',
          });
          console.log('imageRef', imageRef);
          // const snapshot = await uploadBytes(imageRef, file, {
          //   contentType: 'image/jpeg',
          // });

          console.log('uploaded!');
        } catch (error) {
          console.log('error', error);
        }
      }
    }
  };

for uploading the file you need to follow its guideline RN Firebase

Answer 2

storage upload requires platform specific code. I have code snippet at my github playground with storage upload and react-native-image-picker Snippet Essentially

const uri = Platform.OS === 'android' ? uploadUri : uploadUri.replace('file://', '');
const task = storage().ref(ref);
return task.putFile(uri);