React-native-fetch-blob: [IOS] Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.

[cherniv]

First of all, thanks for all of your work, you are doing a great job!
I'm trying to upload a blob to firebase by using the https://github.com/wkh237/rn-firebase-storage-upload-sample and dcworldwide' example here: https://github.com/wkh237/react-native-fetch-blob/issues/44
but no matter what i'm doing i'm getting this kind of error:

Blob verbose: Blob constructor called mime image/png;BASE64 type string length 177
log.js:24 Blob verbose: create Blob cache file from file path RNFetchBlob-file:///var/mobile/Containers/Data/Application/7EC98D41-B3AC-47…ts/RNFetchBlob_tmp/RNFetchBlobTmp_f48f64c8-f627-497a-b10b-6cc72f5cf540.png
log.js:24 Blob verbose: register blob onCreated 0
log.js:24 Blob verbose: invoke create event
log.js:36 Blob error: RNFetchBlob could not create Blob : /var/mobile/Containers/Data/Application/7EC98D41-B3AC-4714-AD90-DAEC405B57F5/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_f48f64c8-f627-497a-b10b-6cc72f5cf540.png v {code: "storage/invalid-argument", message: "Firebase Storage: Invalid argument in put at index 0: Expected Blob or File.", serverResponse: null, name: "FirebaseError"}

I also tried to provide it with base64 static string , and it seems like blob is created , but Firebase doesnt like it or doesn't understand that it is Blob object..

I have:

"firebase": "^3.2.1",
"react-native": "^0.30.0",
"react-native-fetch-blob": "^0.8.0",

[wkh237]

Hi @cherniv , do you have a sample code of how you use it ? I've tried the sample app and it works fine. (Though there's a little misleading in content-type). From the log you provided

log.js:36 Blob error: RNFetchBlob could not create Blob : /var/mobile/Containers/Data/Application/7EC98D41-B3AC-4714-AD90-DAEC405B57F5/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_f48f64c8-f627-497a-b10b-6cc72f5cf540.png

I think it failed at this line, perhaps the image does not exist at the given path, you can try to create Blob using BASE64 encoded string and see if that works or make sure the file exists.

[cherniv]

My code looks like this:

          .config({ fileCache : true, appendExt : 'png' })
          .fetch('GET', 'https://avatars0.githubusercontent.com/u/5063785?v=3&s=460')
          .then((resp) => {
            testFile = resp.path()
            console.log('PATH:', testFile)
            let blob = new Blob(RNFetchBlob.wrap(testFile), { type : 'image/png;BASE64'})
          // Blob creation is async, start upload task after it created
          blob.onCreated(() => {
            // upload image using Firebase SDK
            return firebase.storage()
              .ref('rn-firebase-upload')
              .child(testImageName)
              .put(blob, { contentType : 'image/png' })
              .then((snapshot) => {
                console.log('SNAPSHOT:', snapshot)
                blob.close()
              })
          })
        })

It doesnt work on both iOS simulator and device

[wkh237]

@cherniv , I've tried your code and it works on my environment (both iphone and simulator), I've create a branch that contains sample code which is based on your code. Please try if that works, thank you !

[cherniv]

I realised now that it starts working after adding of these two lines:

window.Blob = Blob;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;

but when i'm doing this, the fetch api that i'm using to fetch data from my server stops working for my app at all..
Is there a way to do these assignments in a different way?

[wkh237]

Because our XMLHttpRequest replaced original one and RN fetch uses whatwg-fetch which is based on XMLHttpRequest. It is possible to fix this problem but I need to do some tests. An alternative way is use the 'fetch' provided by our module, it's not based on XMLHttpRequest.

[wkh237]

@cherniv , I'd like to inform you that a beta release 0.9.0-beta.5 might solve this issue for you

To install beta package use the following command :

$ npm install --save react-native-fetch-blob@beta

Usage

See Document

[kdedakia]

Hi there, thanks for creating this awesome project!

I'm still having problems with fetch on 0.9.1.
Everything works fine when I comment out
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest

export function fetchMarkers(loc) {
return dispatch => {
dispatch(requestMarkers(loc))
return fetch("https://XXXXX.firebaseio.com/markers.json")
.then(response => response.json())
.then(json => dispatch(receiveMarkers(loc,json)))
}
}

[wkh237]

@kdedakia , thanks for reporting this issue. I'll look into it and update status in #106.

Besides, have you tried Fetch Replacement ? This is a fetch implementation based on our native network module rather than XMLHttpRequest polyfill 😄

[kdedakia]

Thanks, that completely fixed my issues!

[mlumbroso]

I tried to use Fetch Replacement, but my fetch are breaking, not even silently failed as before :

Object is not a function (evaluating 'fetch(url, { method: 'post', body: JSON.stringify(comment)})

Edit : console.log(fetch) gives me {} as a result....
Edit 2 : didn't see #106 I'm testing beta and will post the result
Edit : Beta is working great :) Thanks for your great work !!

[wkh237]

@mlumbroso , thanks for reporting. Please feel free file an issue if something went wrong 😄