React-native-fetch-blob: Failed to execute 'readAsText' on 'FileReader'

[jpgarcia]

Hi Guys!,

I'm successfully uploading blobs to Firebase but after overriding the XmlHttpRequest I'm getting the following warning when debugging JS remotely:

Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

I think can be related to packager request or something like that but I'm not sure. I found a workaround for now but it will be nice to avoid that. I'm doing this before uploading:

this.OriginalBlob = window.Blob
this.OriginalXMLHttpRequest = window.XMLHttpRequest
window.Blob = RNFetchBlob.polyfill.Blob
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest

after uploading:

window.Blob = this.OriginalBlob
window.XMLHttpRequest = this.OriginalXMLHttpRequest

My Uploader class looks like this:

import RNFetchBlob from 'react-native-fetch-blob'
import { storage as firebaseStorage } from '@lib/firebase'

import EventEmitter from 'events'

class FirebaseUploader extends EventEmitter {

  constructor(bucket, fileName) {
    super()

    this.bucket = bucket
    this.fileName = fileName
  }

  uploadFromBase64(base64) {
    const type = 'application/octet-stream;BASE64'

    return Blob.build(base64, { type })
      .then(blob => {
        return this.uploadFromBlob(blob)
      })
  }

  uploadFromUri(uri) {
    return RNFetchBlob
      .fetch('GET', uri)
      .then(res => {
        return this.uploadFromBase64(res.data)
      })
  }

  uploadFromBlob(blob) {
    return new Promise((resolve, reject) => {
      var metadata = {
        cacheControl: 'public,max-age=1296000',
        contentType: 'image/png'
      }

      const uploadTask = firebaseStorage
        .ref(this.bucket)
        .child(this.fileName)
        .put(blob, metadata)

      uploadTask.on('state_changed', snapshot => {
        const { bytesTransferred, totalBytes } = snapshot
        const progress = (bytesTransferred / totalBytes) * 100
        this.emit('progress', progress)
      }, error => {
        blob.close()
        reject(error)
      }, () => {
        blob.close()
        resolve(uploadTask.snapshot.downloadURL)
      })
    })
  }
}

export default FirebaseUploader

Context Versions

• React Native: 0.37.0
• Node: 7.1.0
• Firebase: 3.6.2
• react-native-fetch-blob: v0.10.1-beta.2

[wkh237]

@jpgarcia , Thanks for reporting this issue. Your code looks fine, I'll try to find the problem 👍

[atlanteh]

After upgrading to rnfb 0.10.0 I'm getting the same error for all post requests sent..(not related to firebase).

Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

React Native: 0.38.0
Node: 6.2.0
Firebase: 3.6.2
react-native-fetch-blob: v0.10.0 (also happens in v0.10.1-beta3)

Reverting back to 0.9.5 seems to solve the problem for now

[jpgarcia]

Hi guys, do you have any update on this?

thanks!

[bielcapanema]

Same here 👎

[wkh237]

still not be able to reproduce this problem, if someone can provide a sample project it'd be helpful 😅

[medlmichael]

I can reproduce the issue. I'm no expert but as a hunch it seems that once you use RNFetchBlob with Firebase for add an image to storage the issue occurs. I have a component that once I use the uploaded my parent components standard fetch is being overridden. I've tried switch to 0.9.5, 0.10 including betas the warning pops up. Freezes my app but that might be a side effect.

[mz21]

I think this happens because RNFetchBlob and the default fetch library can have strange interactions.

RNFB suggests wrapping RNFetchBlob.fetch https://github.com/wkh237/react-native-fetch-blob#user-content-rnfetchblob-as-fetch

That fixed it for me.

[wkh237]

I'm going to close this and related ones as @mz21 already provided a feasible solution.

The cause is that RN's devtool intended to send an HTTP request via WHATWG-fetch after XMLHttpRequest for some reason, but WHATWG-fetch does not compatible with our Blob implementation, as such it failed upon consuming a blob object.

IMO applying fetch replacement in debug mode would be a solution to this issue.

[Pianist038801]

@mz21 How can I wrap fetch? I still have the issue and am stuck with it.

[wkh237]

please refer to the wiki it might be help.

[Pianist038801]

@wkh237
Extremely thanks. You saved my day. :)

[Naveen-ICARUS]

hi
can any one send me the working sample code with fetch replacement. i'm struggling from past 2 days. it'll be great help.
thanks

[vitalikzyzych]

Hello, this my example

        //Binary
        var reader = new FileReader();
        var t = this;
        reader.addEventListener("loadend", function() {
            t.readEndpointMessage(reader.result);
        });
        reader.readAsArrayBuffer(message.data);

On browser side all works fine (message.data is Blob with _proto Blob).
But on RN side it working inappropriate (message.data is Blob with _proto Object).
I can see this error Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
Can someone help me with this issue?
P.S. message is Websocket message

[jankarres]

I can recommend the solution from @wkh237 above. Replacing the fetch method with RNFetchBlob works easily.