How to Upload Image form Phone to Firebase Storage?

Question

I'm trying to upload a Picture form my Phone to Firebase using Expo. I get a uri form the Picture but not sure how to convert it, that I can uploade it to Firebase?

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    if (!result.cancelled) {
      console.log('device URL: w',result.uri);
      this.setState({ image: result.uri });
      this.uploadImage(result.uri).then(resp =>{
        alert('success')
      }).catch(err=>{
        console.log(err)
      })
    }
  };

When i Log result.uri I get:

file:///var/mobile/Containers/Data/Application/1E5612D6-ECDB-44F4-9839-3717146FBD3E/Library/Caches/ExponentExperienceData/%2540anonymous%252FexpoApp-87f4a5f5-b117-462a-b147-cab242b0a916/ImagePicker/45FA4A7B-C174-4BC9-B35A-A640049C2CCB.jpg

How can I convert it to a format that works for firebase?

Answer 1

you can convert the image to a base64, there are several libraries that can do that.

Answer 2

You need to convert the image to a base64, here is an example using rn-fetch-blob https://github.com/joltup/rn-fetch-blob

 export const picture = (uri, mime = 'application/octet-stream') => {
  //const mime = 'image/jpg';
  const { currentUser } = firebase.auth();  
  const Blob = RNFetchBlob.polyfill.Blob;
  const fs = RNFetchBlob.fs;
  window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
  window.Blob = Blob;

  return ((resolve, reject) => {
      const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
      let uploadBlob = null;
      const imageRef = firebase.storage().ref('your_ref').child('child_ref');
      fs.readFile(uploadUri, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` });
      })
      .then((blob) => {
        uploadBlob = blob;
        imageRef.put(blob._ref, blob, { contentType: mime });
      })
      .then(() => {
        //take the downloadUrl in case you want to downlaod
        imageRef.getDownloadURL().then(url => {
         // do something
        });
      });
  });
};