React-native-firebase: Storage not working

[neverlan]

Trying to upload a file as shown in the doc.
Same code was working with firestack#v3 branch.

[Salakar]

Can you show me your code?

[neverlan]

Sure.

From a redux actions:

[Salakar]

@neverlan thanks, and where is firebase defined? Not sure where you're getting firebase.userId from?

[neverlan]

I'm adding custom props like userId in the firebase object for convenience.
Database is working.

[Salakar]

Well, it looks likefirebase is undefined like the error says, you may not have imported it correctly, can I see where you import it?

[neverlan]

firebase is well defined. According to the error log, the problem is there line 12:

this.storage = storageRef.storage <====
storageRef is undefined

[Salakar]

Ah ok, can you try something: comment out where you're adding custom props onto firebase instance and hard code in a user id there, does it work?

lib/modules/storage/reference.js#114 the putFile function is losing it's context somewhere along the way, am running it here unmodified and it's got the correct 'this' context

[neverlan]

Tried with a clear firebase instance. Same problem. Added some breakpoints. The first call is ok (storageRef is defined) but when calling .then(() =>) storageRef is undefined.

[Salakar]

Eeek, ok, give me some time to debug it more, weird one 😕

In the meantime something like:

might work? (putFile = ( ... ) => {)

Can you give that a go in your node modules and restart the packager

[Salakar]

Have a feeling its the promisify util screwing it up somewhere, it is due to be removed, am still in the process of changing native side to use the native promise implementations, I'll do storage now and push a new alpha.

[neverlan]

putFile = ( ... ) => {} does not resolve the issue.
Yes pretty weird, I don't understand why the StorageTask constructor is called two time (one on init, another time calling .then()).

[Salakar]

@neverlan aye not quite sure why it's calling that twice either, didn't write the original code welp, re-writing/refactoring now, give me an hour or so and i'll have android & ios redone with native promise usage - it was on the todo anyway, just bumped it up.

[neverlan]

Ok cool :)

[Salakar]

@neverlan ios done: https://github.com/invertase/react-native-firebase/commit/e23302fb2497976c192669af1fd358aac6da6e92 . Finishing android and then i'll do a release.

[neverlan]

Thanks for quick feedback :)

I'm getting this error:

[Salakar]

Try pull again, hadn't finished yet with the JS side ;p only just pushed the JS updates

[neverlan]

I now got:

Probably not related ?

[Salakar]

Ok leave it with me, writing tests atm for storage, so it might be related - will see what the tests say.

[Salakar]

What type of file is it also? @neverlan

[neverlan]

A jpg. The file is uploaded, it's just that the .then func crash the app.

[Salakar]

If you comment out this line and rebuild ios app - does it work?

[neverlan]

Nop :)

(commented out, xcode clean, xcode build)

[Salakar]

What about the downloadUrl line (the one above last one), sorry!

[neverlan]

Okay, figured out that the RCTJSONStringify error was due to a write permission on the storage path issue. But the "cannot read property 'storage' of undefined" remain.

[Salakar]

Ah ok, so 2 errors then, first being it should of rejected into the catch if no storage permission, and the other scope/context one. Will carry on my side then

[neverlan]

Just to sum up:

Pretty funny :)

I tested this code directly inside a component, not using redux (thought redux-thunk could be involved in the promise error).

[Salakar]

Probably not this but:

const firebase = RNFirebase.initializeApp({
    // and whatever options
    debug: __DEV__ ? '*' : false,
    errorOnMissingPlayServices: false,
    persistence: true,
});

Another thing i'll add a check for is that, no direct constructor calls or something like that. But again most likely not that.

[Salakar]

Sorry to keep using you as a guinea pig 🙈 could you change as per the below diff, in task.js:

And restart packager etc

[neverlan]

WORKING adding .bind(promise) :) :)

Btw the doc is not clear about using directly the constructor (new RNFirebase() in doc, .initialiazeApp({} in the example app) ;)

Thanks :)

[Salakar]

Wooooo \o/ ok one more thing - does it go into 'catch' when the user has no write permission on storage - like you had before

Will update the docs also for initApp, there's no harm in using the constructor at the moment - just it might break in the future when I eventually get the time to implement multiple db instances.

[neverlan]

Nop not catched :)

[neverlan]

Well it is catched in console but the app still crash.

upload(currentPicturePath)
.catch(err => console.log(err));

[Salakar]

RCTJSONStringify error again?

[neverlan]

Yes:

[Salakar]

Getting there ;p

[Salakar]

Hoorah, all fixed:

[neverlan]

Working perfectly :)

[manjeets12]

@Salakar and @neverlan can you please guide how you fixed this issue, I am getting same error on android 5.1 with RN 0.42 i.e RNFirebaseStorage.putgile got 3 arguments, expected 4, my code is

export const startUpload= function(data){
  let {url,path} = data; // where url is 'Images/Avatar/'+uid   and path is local path generated by image-crop-picker
  return dispatch => {
    firebase.storage()
    .ref(url)
    .putFile(path,{contentType: 'image/jpeg'})
    .then(uploadedFile => {
        console.log(uploadedFile);
    })
    .catch(error => {
        console.log(error);
    });
  }
}

[Salakar]

@manjeets12 android will be completed in tonights build - it's still in progress. The above was for ios. Will tag you in the commit/release. We have tests now for storage so will confirm it's working before releasing.

Your code above is correct also.

[manjeets12]

great, I will be waiting for the updates.

I have a small doubt, hope you will not mind asking at the wrong place, react-native-image-crop-picker giving me file path something like that "

file:///data/data/com.riduk/cache/react-native-image-crop-picker/bcab9320-cf4e-4eba-b040-0c63eb6c57d6.jpg

", will this work for storage or do I need to edit it in some other way (just asked because you are checking on "content" within path in your java files

[Salakar]

That path looks correct 👍

[Salakar]

@manjeets12

Android done, releasing new version now (alpha10). Let me know if you notice anything off/anything i've missed.

[manjeets12]

@Salakar great it is so fast, I will let you know as soon as I am done with testing it

[manjeets12]

works perfectly for android

[manjeets12]

hi @Salakar please change photoURL to photoUri in documentation for update profile function, because it is what you used in your java classes

firebase.auth().currentUser
        .updateProfile({
          photoUri: response.downloadUrl, // this is working and photoURL: string, this is not
          displayName:'Manjeet Singh'
        })
        .then(user =>{
          console.log(user); //returned the updated user but on reload returned the old user
        })
        .catch(error =>{
          console.log(error);
        });

I think updateProfile only working for displayName as of now.

[Salakar]

Will look into this, should match whatever the web sdk for firebase does

[chrisbianca]

I've just updated the Java code to look for photoURL rather than photoUri which brings it inline with the web SDK and what is already done in iOS