React-Native: Download Image from Firebase Storage

Question

Pre-Informations:

I still have a Firebase project opened and I am successfully still using the Firebase Database (So the firebase.initializeApp(config) works). I uploaded several Images at my Firebase Storage in the folder "/Images/" and named them image1.jpg, image2.jpg,..

React-Native: 0.31.0, Firebase: 3.3.0

What I want:

I want to get the Image from the Firebase Storage and put them into an <Image>

What I actually did:

var storageRef = firebase.storage().ref('Images/image1.jpg');

//1. Try:
storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//2. Try:
var sampleImage = storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//3. Try:
var sampleImage = storageRef.getDownloadURL();

Informations about the code:

1. The code doesn't reach the console.log(url) point

   2.1. Tried to use the sampleImage as source in a <Image> object: empty Image

   2.2. Tried to log the sampleImage: undefined

   2.3. Tried to logthe url: didnt reach this point

   3.1. Tried to use the sampleImage as source in a <Image> object: empty Image

   3.2. Tried to log the sampleImage: { F: 0, ka: undefined, o: { F: 0, ... } }

All tries returned the same error code after 2-3 minutes.

Firebase Storage: Max retry time for operation exceeded, please try again.

Thank you very much in advance for you help.

Solution 1

Update

I reported this issue to Firebase support and I got the following response:

Our engineers got back and it seems that this is an Android-specific issue (works on iOS) [..] We are currently working on this, but as to the timeline, we could not share anything as of the moment

Research

It appears that this is an actual bug caused by react-native's XMLHttpRequest acting up. When trying the getDownloadURL() in the same way you describe the same thing happens (ie. Max Retry time reached).

However when overriding react-native's polyfill of XMLHttpRequest as described in this stack overflow thread getDownloadURL() will finish normally and return a valid URL.

We are using react-native v0.33.0, Firebase v3.4.1

Workaround

We have been using this workaround in the meantime; bypassing the Firebase API:

var bucket = firebase.storage().ref().bucket;
var firebaseUrl = "https://firebasestorage.googleapis.com/v0/b/" + bucket + "/o/";
var finalUrl = firebaseUrl + 'path%2Fto%2Fresource';
firebase.auth().currentUser.getToken()
.then((token) => {
  fetch(finalUrl, {headers: {'Authorization' : 'Firebase ' + token}})
  .then((response) => response.json())
  .then((responseJson) => {
    var downloadURL = finalUrl + "?alt=media&token=" + responseJson.downloadTokens})
  })
}); 

This is an issue that seems to affect a small amount of users since I have only seen the problem raised otherwise here. However this appears to be an actual bug and it is very debilitating when it occurs, so any more input would be greatly appreciated.

Solution 2

Your first one seems right based on the docs. I believe you're getting an error so wire up an error callback as well:

storageRef.getDownloadURL().then(function(url) {
    console.log(url);
}, function(error){
    console.log(error);
});

See: https://firebase.google.com/docs/reference/js/firebase.storage.Reference#getDownloadURL

Solution 3

TO get All the Images From the storage

firebase.storage().ref().child('filename').list().then(result => {
    // Loop over each item
    result.items.forEach(pics => {
        firebase.storage().ref().child(pics.fullPath).getDownloadURL().then((url) => {
            console.log(url);
            //these url will be used to display images
         })
     });
})