React-native-fetch-blob: Firebase upload suddenly won't work

[kennedc]

I am using

"firebase": "^3.6.0",
"react": "15.3.2",
"react-native": "0.37.0",
"react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
"react-native-fetch-blob": "^0.10.0",
"react-native-vector-icons": "^3.0.0",
"react-native-video": "^0.9.0"

And i'm trying to upload a video recorded with react-native-video to firebase - this worked but suddenly it stopped working and now it doesn't succeed.

I'm using the following code where this.props.file.path looks something like this:

file:///storage/emulated/0/Pictures/vidid.mp4

  accept = () => {
    let rnfbURI = RNFetchBlob.wrap(this.props.file.path)
    Blob
    .build(rnfbURI, { type : 'video/mp4;'})
    .then((blob) => {
      // upload image using Firebase SDK
      firebase.storage()
        .ref()
        .child('testImageName')
        .put(blob, { contentType : 'video/mp4' })
        .then((snapshot) => {
          console.log(snapshot)
          blob.close()
          done()
        })
    })
}

I tried writing Firebase support, but then won't help me since this is a workaround.

My blob object looks like this:

 { listeners: {},
   isRNFetchBlobPolyfill: true,
   multipartBoundary: null,
   _ref: 'file:///storage/emulated/0/Pictures/VID_20161113_142100.mp4',
   _blobCreated: true,
   _closed: false,
   cacheName: 'blob-559cd5c4-e880-4742-a3fe-dfae7e1a0df0',
   type: 'video/mp4;',
   size: '3665375' }

[kenmaca]

May be related to #180?

Is the Firebase error related to the "wrong offset"?

[kennedc]

It doesn't give any error - it just stalls at zero procent uploaded.

[roligheten]

We are experiencing the same issue with iOS: The upload might actually succeed (seems to be with small files) but the the Firebase API upload callback is never called. (Even if the upload was successful and the file appears in storage).

We tested with release build iOS and development Android. Development Android works perfectly. Release iOS experiences this issue. Haven't tested with development build iOS.

[wkh237]

Well, I'm not be able to reproduce this bug, I think I need more information, the logs from XMLHttpRequest polyfill can be turned on by adding this line :

XMLHttpRequest.setLog(3);

I think it'd helpful !

[tomershohet]

I have the same thing on Android, the only thing i did was update my android studio then suddenly the callback won't return. I've tried a couple of different approch, using .then or listen to state - or add an await before the "put" command.
The result is always the same - the file does get uploaded to the firebase storage but the client never get the callback.

[wkh237]

Okay, I'll setup an 0.37 environment and try reproduce the problem.

[tomershohet]

The bug reproduce in 0.36, 0.36.1 and 0.35 as well

[tomershohet]

I see the response data when i put breakpoints in debug mode on the XMLHttpRequest - but it never call any of my events except the error. It is like the firebase javascript sdk won't register well to the events somewhere.

[sprmn]

I think I found a related bug when calling getDownloadURL() using "firebase": "^3.6.1". If window.XMLHttpRequest is overwritten by the polyfill, the returned promise does not resolve. I tried to look at the logs, but like @tomershohet is saying, everything seems fine with the response data. There is probably some event that firebase waits for, but I can't find it. Debugging the minified firebase code is hard.

[wkh237]

@sprmn , thanks for the information. Looks like it may related to the firebase's version since I can't get these error with 3.4.1. I'll look into it.

[sprmn]

Yes, it was not present in any version before 3.6.1.

[sprmn]

Btw, you'll have to fix #187 in order to debug this, otherwise getDownloadURL() will throw an error.

[tomershohet]

So i can say for sure that the bug is happening due to something that was change on firebase javascript sdk between 3.5.1 and 3.6.0.
The callback works on 3.5.1 and stop working from 3.6.0 and farther versions.

[sprmn]

@wkh237, I think I found the problem.

The firebase team probably changed their code in the newer api versions and now uses event listeners for the XMLHttpRequest. The event related code of the XMLHttpRequest polyfill is incorrect. The dispatchEvent over here expects an event object with a type field containing the event type, whereas here a type is provided to the dispatcher as first argument and the second argument contains the event object. Therefore the listeners are never called, since the event.type will always be undefined.

To fix it, either the dispatchEvent calls should provide the event object as first argument, or the dispatchEvent function itself should accept the type as first argument and the event object as second argument.

[wkh237]

FYI, I've published a beta release on npm 0.10.1-beta.1 hopefully this can solve the problem. Please try if it works, thanks !

[harudev]

@wkh237 It works well, thanks!

[kennedc]

I still can't get it to work with:

"firebase": "^3.6.1",
"react-native-fetch-blob": "0.10.1-beta.1",

Using the example from firebase docs it stalls at:

01-05 12:59:55.790 27241 9276 I ReactNativeJS: Upload is 0% done
01-05 12:59:55.790 27241 9276 I ReactNativeJS: Upload is running

var path = this.props.file1.path
  Blob.build(RNFetchBlob.wrap(path), { type : 'image/jpeg' })
  .then((blob) => {
    console.log(blob)
    var uploadTask = firebase.storage()
    .ref('rn-firebase-upload')
    .child('testImageName')
    .put(blob, { contentType : 'image/png' })

    uploadTask.on('state_changed', function(snapshot){
      // Observe state change events such as progress, pause, and resume
      // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
      var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log('Upload is ' + progress + '% done');
      switch (snapshot.state) {
        case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
        case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
      }
    }, function(error) {
      console.log(error)
      // Handle unsuccessful uploads
    }, function() {
      // Handle successful uploads on complete
      // For instance, get the download URL: https://firebasestorage.googleapis.com/...
      var downloadURL = uploadTask.snapshot.downloadURL;
      console.log('feeed nok det virker')
    });
  }
)

[hananurrehman]

For me it says
Upload is 0% done
Upload is running
Upload is 100% done
Upload is running
```
Error: Uncaught (in promise): TypeError: this.uploadTask is undefined
[150]/UploadPage.prototype.phenko/http://localhost:8100/build/main.js:206:21
async/http://localhost:8100/build/vendor.js:125056:13
finvoke@http://localhost:8100/build/polyfills.js:3:9281
onInvoke@http://localhost:8100/build/vendor.js:4508:28
finvoke@http://localhost:8100/build/polyfills.js:3:9208
crun@http://localhost:8100/build/polyfills.js:3:4433
f/<@http://localhost:8100/build/polyfills.js:3:14074
finvokeTask@http://localhost:8100/build/polyfills.js:3:9956
onInvokeTask@http://localhost:8100/build/vendor.js:4499:28
finvokeTask@http://localhost:8100/build/polyfills.js:3:9869
crunTask@http://localhost:8100/build/polyfills.js:3:5124
o@http://localhost:8100/build/polyfills.js:3:2196
t/this.invoke@http://localhost:8100/build/polyfills.js:3:10985

Stack trace:
c@http://localhost:8100/build/polyfills.js:3:13535
f/<@http://localhost:8100/build/polyfills.js:3:14107
finvokeTask@http://localhost:8100/build/polyfills.js:3:9956
onInvokeTask@http://localhost:8100/build/vendor.js:4499:28
finvokeTask@http://localhost:8100/build/polyfills.js:3:9869
crunTask@http://localhost:8100/build/polyfills.js:3:5124
o@http://localhost:8100/build/polyfills.js:3:2196
t/this.invoke@http://localhost:8100/build/polyfills.js:3:10985
```

[jSkrills]

@hananurrehman I am seeing this same behavior now that you described above except I don't even get an error returned. I get a successful response but the image never shows up and in the firebase console itself when trying to view the asset it says "Error loading preview". I have noticed that I only see this behavior on images over 350k, my images that fail are all around 650k. This was working fine not too long ago and I haven't changed much around this functionality. Do you recall your fix or workaround by chance?

[hananurrehman]

I'm sorry I do not have access to that code now.

[jSkrills]

Shoot, ok thanks anyway.

[jlsilva10]

@jSkrills I am facing that same issue now that I upgraded expo to sdk 31.
Did you manage to solve the problem?