Upload to Firebase with Android images with prefix 'content://' fails to complete

[MrRoyce]

Hi there, I've been able to upload images to FireBase with the uri of type '/storage/emulated/0/DCIM/Camera/IMG_20160626_154052.jpg' however, when I use the library, https://github.com/jeanpan/react-native-camera-roll-picker it returns the URI in the format 'content://media/external/images/media/20038'

The uploads complete, but they only send a minimal amount of data (e.g. 31 bytes) to FireBase out of the 1.5m file?

Is it a matter of the 'type' in the Blob.build and the 'contentType' in the put being set properly?

Also, do I assume I should not use theRNFetchBlob.wrap() with files with the 'content:' prefix? I tried it with the wrap and it fails with the RN callback error and without the wrap() it fails as described above.

This is what I'm using now:

...
    Blob.build(rnfbURI, { type : 'image/jpg;BASE64'})  // rnfbURI is NOT wrapped 
    .then((blob) => {
      firebaseApp.storage()
        .ref('images')
        .child(testImageName)
        .put(blob, { contentType : 'image/jpg' })
        .then(() => {
          blob.close();
      })
...

Thanks again for you help.

[wkh237]

@MrRoyce , thanks for the information !

If you append ;BASE64 after the mime type string the library will try to decode the first argument as BASE64 encoded string, basically you can just pass image/jpg to type.

However, the Blob constructor only support file URI at this moment, passing an URI starts with content:// might not work as expected, but there's an workaround, you can copy the file using fs.cp() then upload the copy, here's an example

  // tmp file path and tmp blob
  let tmp = fs.dirs.DocumentDir + '/tmp'+Date.now()
  let tmpBlob = null
  CameraRoll.getPhotos({first : 10})
    .then((resp) => {
      let url = resp.edges[0].node.image.uri
      // make a copy of the image in camera roll 
      return fs.cp(url, tmp)
    })
    .then(() => {
      // create Blob using the copy
      return Blob.build(RNFetchBlob.wrap(tmp), {type:'image/jpg'})
    })
    .then((b) => {
      blob = b
      // upload to Firebase
      return firebase.storage()
        .ref('rnfbtest').child('camra-roll-'+Date.now()+'.jpg')
        .put(b, {contentType : 'image/jpg'})
    })
    .then((snapshot) => {
      // remove temp file and release the blob instance
      blob.close()
    })

[matthieubessol]

@wkh237 thank you I also have the same problem. I tried your code, but when I do the upload to Firebase, it never ends. It won't go to the last step. I added a catch to get the errors, but there are no errors.
Here is my blob :
{ listeners: {}, isRNFetchBlobPolyfill: true, multipartBoundary: null, _ref: '/data/user/0/com.rndm/files/tmp1472509561234', _blobCreated: true, _closed: false, cacheName: 'blob-5999b6fb-dd73-499a-8705-728facaff680', type: 'image/jpg', size: '2463628' }

Don't know if it works for @MrRoyce .

Thanks for your help.

[MrRoyce]

@wkh237 I was able to get the file upload to fire base working with the https://github.com/bamlab/rn-camera-roll library. That library converts the native android format 'content://...' to the iOS format 'file://..'

@matthieubessol it worked for me from my device but only if debug is not on. So turn off 'debug external' and see if that works.

[wkh237]

@matthieubessol , does it happens on both IOS and Android ?

[matthieubessol]

@MrRoyce thanks it did not work in my case but I think it's a problem with my code. To be sure, if I've disable live reloadand js dev mode, that's enough ?

@wkh237 I'm for the moment testing it only on my Android phone.

In fact, I don't need the CameraRoll in my project. I have the path of a picture I took with React-native-camera. The path is like that : content://media/external/images/media/85761. The problem is that I don't really understand how to handle that to create a blob and to send it with Firebase.

Here is my code :

`

   var self = this; 
   let tmp = fs.dirs.DocumentDir + '/tmp'+Date.now()
   let tmpBlob = null;

   var p = new Promise(
      function(resolve,reject) {
        let url = cameraUriPath; // something like content://media/external/images/media/85777
        resolve(fs.cp(url, tmp));
      }
    )

    p.then(() => {
      // create Blob using the copy
      return Blob.build(RNFetchBlob.wrap(tmp), {type:'image/jpg'});
    })
    .then((b) => {
      tmpBlob = b;
      // upload to Firebase
      return firebase.storage().ref('rnfbtest')
                .child('camera-roll-'+Date.now()+'.jpg')
                .put(b, {contentType : 'image/jpg'});
    })
    .then((snapshot) => { // Program never go there
      Alert.alert('Sent');
      // remove temp file and release the blob instance
      tmpBlob.close();
    })
    .catch((e) => {
      console.log(e);
      return;
    });`

There is certainly a problem with my code, I'm new to react-native and Firebase.
It may be more a code problem than an issue.

[wkh237]

@MrRoyce @matthieubessol , I've published a prerelease version on npm 0.9.4-beta.2 which should be able to use extra URI such ascontent://, please try update the package and see if it works properly, also any feedback will be grateful, thank you 😄

see the test case for sample usage 👍

[matthieubessol]

@wkh237 thanqs again for the support. I'm now on the beta, but it still does nothing. I took the exact same code as test case. Here are my logs.
'CameraRoll', 'content://media/external/images/media/85803'
start upload ..

It strange, as soon as firebase make the call, there's nothing after.

[wkh237]

@matthieubessol , I'm a little confused about the code snippet you provided, looks like the promises will not wait for completion of fs.cp, I prefer do it this way

var self = this; 
   let tmp = fs.dirs.DocumentDir + '/tmp'+Date.now()
   let tmpBlob = null;

-   var p = new Promise(                                                                                                                                                          
-      function(resolve,reject) {                                                                                                                                                          
-       let url = cameraUriPath; // something like content://media/external/images/media/85777                                                                             
-        resolve(fs.cp(url, tmp));                                                                                                                                                                                                                                       
-      }                                                                                                                                                                                                                                                                                                                    

+ var p = fs.cp(url, tmp)                                                                                                                                                                                                                                       

    )

however, if you've upgrade to 0.9.4-beta.2 there's no need to copy the file before creating blob object, simply use the URI should be fine.

    let url = cameraUriPath; // something like content://media/external/images/media/85777
    Blob.build(RNFetchBlob.wrap(tmp), {type:'image/jpg'});
    .then((b) => {
      tmpBlob = b;
      // upload to Firebase
      return firebase.storage().ref('rnfbtest')
                .child('camera-roll-'+Date.now()+'.jpg')
                .put(b, {contentType : 'image/jpg'});
    })
    .then((snapshot) => { // Program never go there
      Alert.alert('Sent');
      // if you don't want to remove the source file, do NOT close the blob
      // tmpBlob.close();
    })
    .catch((e) => {
      console.log(e);
      return;
    });

[matthieubessol]

@wkh237 yes, this is what I was testing. But still the same problem, at the moment Firebase should upload, it doesn't. Just nothing happens. I don't think it's because of the blob cause it seems good.

[matthieubessol]

@wkh237 it's working, don't know what I've changed though.