Uploading images to Firebase doesn't work

Question

Problem

I am trying to upload images to Firebase with React Native. I am using this code to do so, and when I use this code nothing happens. The progress percentage never goes up*.

var uploadTask = 
   storageRef.child('images/'+expoID+this.state.time).put(
     this.state.image, metadata
   );

this.state.time being the timestamp, it is a state defined at the start of the screen so that the image and the post don't have a different time stamp.

this.state.image being a direct path to the image on the user's phone.

metadata being:

{
  contentType: 'image/jpeg'
};

What I think may be the problem

I think the problem may be that the this.state.image variable is a path to the file on the user's phone, and that may be the wrong format. The problem is that I don't know what else to put there.

*Progress percentage code:

uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
  function(snapshot) {
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    this.setState({progress:'Upload is ' + progress + '% done'});
  });
}

Answer 1

I had to use react native fetch blob along with react native image crop picker for Firebase to be able to receive my image. Here's what I did:

   openImage() {
      this.setState({ loading: true });
      const imageChangeFail = () => {
         this.setState({ loading: false });
      };
      const Blob = RNFetchBlob.polyfill.Blob;
      const fs = RNFetchBlob.fs;
      window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
      window.Blob = Blob
      const item = Date.now() + Math.random();

      ImagePicker.openPicker({
         width: 400,
         height: 300,
         cropping: true,
         mediaType: 'photo',
      })
         .catch(imageChangeFail())
             .then(image => {
             const imagePath = image.path;

             const uploadBlob = null;
             const storage = firebase.storage();
             const storageRef = storage.ref();
             const imageRef = storageRef.child(item + '.jpg');
             const mime = 'image/jpg';
             fs.readFile(imagePath, 'base64')
                .then((data) => {
                   return Blob.build(data, { type: `${mime};BASE64` });
                })
                   .then((blob) => {
                       uploadBlob = blob;
                       return imageRef.put(blob, { contentType: mime 
                       });
                   })
                      .then(() => {
                           uploadBlob.close();
                           return imageRef.getDownloadURL();
                      })
                         .then((url) => {
                         const { image } = this.props;
                          //this.props.entryUpdate is my action creator 
                          //to update a piece of state called 
                          //entryForm.  Image is just one piece of that 
                          //state.
                         this.props.entryUpdate({ prop: 'image', value: 
                                  url })
                         })
                             this.setState({ loading: false });
                         });
                        }

And then I'd call openImage() here:

<TouchableOpacity
  onPress={() => this.openImage()}
>
  <Text
     style={{
       color: '#000',
       alignSelf: 'center',
     }}
  >
     <Icon name="photo-camera" size={45} color="#000" />
  </Text>

</TouchableOpacity>

Answer 2

try:

uploadImage = async (expoID) => {
  var response = wait fetch(this.state.image);
  var blob = await response.blob();

  storageRef.child('images/'+expoID+this.state.time).put(blob)
    .then( console.log('sucess') )
    .catch( (error) => console.log(error.messaeg) )
}