Not able to upload image on Firebase Storage

Question

I am trying to upload Image using Firebase in Firebase Storage, but file doesn't uploads completely. It shows the size of image 9 bytes only, and when downloaded, it can't be previewed.

Here is the code i am using:-

const [image, setImage] = useState(null)
    const [uploading, setUploading] = useState(false);
    const [transferred, setTransferred] = useState(0);

  const uploadImage = async () => {
    if( image == null ) {
      return null;
    }
    
    const uploadUri = image;
    let filename = uploadUri.substring(uploadUri.lastIndexOf('/') + 1);
    console.log(filename)
    // Add timestamp to File Name
    const extension = filename.split('.').pop(); 
    const name = filename.split('.').slice(0, -1).join('.');
    filename = name + Date.now() + '.' + extension;
    console.log("filename")
    console.log(filename)

    setTransferred(0);

    const storageRef = firebase.storage().ref(`photos/${filename}`);
    console.log("storageRef")
    const task = storageRef.put(uploadUri);
    console.log("storageRef")
    console.log(storageRef)
    // Set transferred state
    task.on('state_changed', (taskSnapshot) => {
      console.log(
        `${taskSnapshot.bytesTransferred} transferred out of ${taskSnapshot.totalBytes}`,
      );

      setTransferred(
        Math.round(taskSnapshot.bytesTransferred / taskSnapshot.totalBytes) *
          100,
      );
      console.log(transferred)
    });

    try {
      await task;

      const url = await storageRef.getDownloadURL();

      setUploading(false);
      setImage(null);

      alert(
        'Image uploaded!',
        'Your image has been uploaded to the Firebase Cloud Storage Successfully!',
      );
      return url;

    } catch (e) {
      console.log(e);
      return null;
    }

  };


  const takephotofrommlib = () => {
    ImagePicker.openPicker({
      width: 300,
      height: 300,
      cropping: true,
    }).then((image) => {
      console.log(image);
      const imageUri = Platform.OS === 'ios' ? image.path : image.path;
      setImage(image.path);
      console.log("image.path")
      console.log(image.path)

    });
  };

I am using react-native-image-crop-picker. I am using Firebase but not react-native firebase. Please Help!

What is image? I see you're checking if (image === null) at the beginning of uploadImage but I don't see where image is defined? — Matt U
Have you tried storageRef.putFile(uploadUri) instead of just put? — Matt U

shammi shammi · Accepted Answer · 2021-05-31T05:01:12

i just make a file uploadFile.js here's a code

import storage from "@react-native-firebase/storage";

export default async function uploadFile(ref,fileName,file) {   
  if(!file) return
      const tarea=file
  if (tarea&& tarea.indexOf("http://") == 0 || tarea&&tarea.indexOf("https://") == 0) 
{
    // do something here
    return tarea
  }
  const reference = storage().ref(`${ref}/${fileName}`);
   await reference.putFile(file).catch(err=>{console.log("error upload",err);
   })
  return await storage()
  .ref(`${ref}/${fileName}`)
  .getDownloadURL().catch(err=>{console.log("download eror",err);
  });
}

you can use like this img= await uploadFile('photos',"fileName",filePath)

In img you can get the download url

Not able to upload image on Firebase Storage

1 Answers