React-native-fetch-blob: firebase storage file upload..

[gilra2000]

In React-Native app how can i upload an image from user' device to Firebase storage?

image path -> /storage/emulated/0/Pictures/image-760dac79.jpg

[wkh237]

Hi @gilra2000 , I think you can check the sample app repository.

Basically you have to replace window.XMLHttpRequest and window.Blob this way

import RNFetchBlob from 'react-native-fetch-blob'

const polyfill = RNFetchBlob.polyfill

window.XMLHttpRequest = polyfill.XMLHttpRequest
window.Blob = polyfill.Blob

Then create a Blob from the path

let path = '/storage/emulated/0/Pictures/image-760dac79.jpg'
Blob.build(RNFetchBlob.wrap(path), { type : 'image/jpeg' })
        .then((blob) => firebase.storage()
                .ref('rn-firebase-upload')
                .child(testImageName)
                .put(blob, { contentType : 'image/png' })
        )
        .then((snapshot) => { /* there we go ! */ })

However, if you replace window.XMLHttpRequest the fetch may not work properly, but you can use our fetch API as an alternative.

[gilra2000]

T.T

failed...

Can you help?

ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);

    if (response.didCancel) {
      console.log('User cancelled image picker');
    }
    else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    }
    else if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
    }
    else {

      const testImageName = `image-from-react-native-${Platform.OS}-${new Date()}.jpg`;

      let path = response.path;  
      // path ->  /storage/emulated/0/Pictures/image-8de3ead3-4411cc.jpg

      Blob.build(RNFetchBlob.wrap(path), { type : 'image/jpeg' })
        .then((blob) => firebase.storage()
                .ref('rn-firebase-upload')
                .child(testImageName)
                .put(blob, { contentType : 'image/png' })
        )
        .then((snapshot) => { /* there we go ! */ })

    }
  });

[wkh237]

@gilra2000 , is there any error message ? I think I need more information to figure out where's the problem.

[gilra2000]

file size.. 4b ;;

[wkh237]

@gilra2000 , does this happens on Android ? I've found an Android XMLHttpRequest bug in 0.9.0, that might cause some problem.

If you're still getting problem, please try install the package to latest package 0.9.1 via the following commands

$ rnpm uninstall react-native-fetch-blob
$ npm install --save react-native-fetch-blob
$ rnpm link

[archanasantoshwhatkar]

Not working just showing page no any action. pls guide me how to save image and videos clicked by camera in database