Can't upload picture from react-native-camera to firebase storage

[arminsal1]

I'm trying to upload the jpg returned when taking a picture using react-native-camera, but I can't successfully upload the created blob to firebase. @wkh237 My code looks like this:

const Blob = RNFetchBlob.polyfill.Blob
const fs = RNFetchBlob.fs
const XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest

uploadImage = (uri, imageName, mime = 'image/jpg') => {
    return new Promise((resolve, reject) => {
      const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
        let uploadBlob = null
        const imageRef = firebase.storage().ref('selfies').child(imageName)
        console.log("uploadUri",uploadUri)
        fs.readFile(uploadUri, 'base64').then((data) => {
          console.log("MADE DATA")
          var blobEvent = new Blob(data, 'image/jpg;base64')
          var blob = null
          blobEvent.onCreated(genBlob => {
            console.log("CREATED BLOB EVENT")
            blob = genBlob
            firebase.storage().ref('selfies').child(imageName).put(blob).then(function(snapshot) {
              console.log('Uploaded a blob or file!');
              firebase.database().ref("selfies/" + firebase.auth().currentUser.uid).set(0)
              var updates = {};
              updates["/users/" + firebase.auth().currentUser.uid + "/signup/"] = 1;
              firebase.database().ref().update(updates);
            });
          }, (error) => {
            console.log('Upload Error: ' + error)
            alert(error)
          }, () => {
            console.log('Completed upload: ' + uploadTask.snapshot.downloadURL)
          })
        })
      }).catch((error) => {
          alert(error)
      })
  }

The uri passed into the uploadImage function is from the path of the image captured with react-native-camera. It displays on the component I have and successfully turns into a base64 string in the data variable, but the process seems to fail when attempting to "put" the blob.

I don't know if this part is related, but I noticed most people use the "window.Blob" and "window.XMLHttpRequest" syntax instead of making Blob and XMLHttpRequest constants, but when I try to do so, I receive this alert:

[lll000111]

FYI, the line of code that produces the message in your large screenshot is in

https://github.com/wkh237/react-native-fetch-blob/blob/master/polyfill/XMLHttpRequest.js#L227

I don't see how it could fail. Since it's in the Javascript part of RNFB you could have a look at why it says "test is undefined". You could look at invalidPatterns. The loop is not how you are supposed to loop through an array, "for...in" is not suppose to be used for array indices. In any case, I fixed the loop in my own repo's 0.10.9 branch.

[rhenmark]

• 1
  I have the same error. any fixes though?

[lll000111]

@rhenmark

Try https://github.com/lll000111/react-native-fetch-blob/tree/0.10.9 and if that does not work:

Since it's in the Javascript part of RNFB you could have a look at why it says "test is undefined". You could look at invalidPatterns

Somebody has to do it :-) (and somebody who actually has the problem or provides a minimal yet complete test case).

[rhenmark]

@arminsal1 Do you have any fixes on this?

[hakanozen]

same problem, any updates?