CODEWITHSUNDEEP
firebasereact-nativefirebase-storagereact-native-fetch-blob
Waqas Ali
Waqas Ali

Reputation: 93

getting error while uploading image to firebase storage in React Native using react-native-fetch-blob

creating React-Native app using firebase and react-native-fetch-blob library. i am unable to upload image to firebase due to this error java.lang.String com.facebook.react.bridge.ReadableMap.string(java.lang.string) on a null object Reference.

it also gives me warning of possible unhandled promise Rejection (id=0): type undefined is not a funtion (evaluating 'filepath.replace('file://,")') trying this code of react-native-fetch-blob library:

function uploadImage() {

        return new Promise((resolve, reject) => {
            let imgUri = 'content://com.google.android.apps.photos.contentprovider/-1/1/content%3A%2F%2Fmedia%2Fexternal%2Fimages%2Fmedia%2F80/ORIGINAL/NONE/1685675380'; let uploadBlob = null;
            const uploadUri = imgUri;

            const imageRef = firebase.storage().ref();
            const name = 'myimg';
            mime = 'image/jpeg';
            fs.readFile(uploadUri, 'base64')
                .then(data => {
                    return Blob.build(data, { type: `${mime};BASE64` });
                })
                .then(blob => {
                    uploadBlob = blob;
                    return imageRef.put(blob, { contentType: mime, name: name });
                })
                .then(() => {
                    uploadBlob.close()
                    return imageRef.getDownloadURL();
                })
                .then(url => {
                    resolve(url);
                })
                .catch(error => {
                    reject(error)
                })
        })
    }

dependencies": {
"fbjs": "^0.8.16",
"react": "^16.3.1",
"react-native": "^0.55.3",
"react-native-firebase": "^4.1.0",
"react-native-image-picker": "^0.26.10",
"react-navigation": "^2.6.0",
"rn-fetch-blob": "^0.10.11"

}

error sshot: enter image description here

warning sshot: enter image description here

Upvotes: 0

Views: 2120

Answers (1)

ggDeGreat
ggDeGreat

Reputation: 1196

You don't need a library rn-fetch-blob to upload image to firebase if you have a react-native-image-picker library.

The root cause of this error is coming from:

type undefined is not a funtion (evaluating 'filepath.replace('file://,")')..

It was trigger somewhere from react-native-firebase library because you have passing a wrong parameter data to the imageRef.put(blob ... which blob was generated from the rn-fetch-blob library.

Instead of using a blob from rn-fetch-blob library, u just need to pass a uri data and it should worked. Let me show u how.

//when user pick an image from local storage
ImagePicker.showImagePicker(options, (response) => {
  if (response.didCancel) {
    console.log('User cancelled photo picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: '+response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: '+response.customButton);
  }
  else {
    firebase.storage().ref().child('myimg.jpg')
    .put(response.uri, { contentType : 'image/jpeg' }) //--> here just pass a uri
    .then((snapshot) => {
      console.log(JSON.stringify(snapshot.metadata));
    })
  });
}

For Error Handling you can refer to the official Firebase Storage Doc here

Upvotes: 1

Related Questions