0

I have a whole bunch of images that have been uploaded on firebase storage and I want to dynamically retrieve the images and display inside my app screen. This is what I tried so far without success:

I tried out the listFilesAndDirectories function found in the RN firebase storage usage API reference which gives me this error: 

 Possible Unhandled Promise Rejection (id: 1):
 Error: [storage/object-not-found] No object exists at the desired reference.
 NativeFirebaseError: [storage/object-not-found] No object exists at the desired reference.

function listFilesAndDirectories(reference, pageToken) {
  return reference.list({pageToken}).then(result => {
    // Loop over each item
    result.items.forEach(ref => {
      console.log(ref.fullPath);
    });

    if (result.nextPageToken) {
      return listFilesAndDirectories(reference, result.nextPageToken);
    }

    return Promise.resolve();
  });
}

const storageReference = storage()
  .ref('gs://appname445.appspot.com/images');

listFilesAndDirectories(storageReference).then(() => {
  storageReference.getDownloadURL();
  console.log('Finished listing');
});

the above function prints the log statement "Finished listing' but doesn't display image

I also wrote this function which didn't work, it outputs a maxDownloadRetryError after 3 minutes

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

 fetchImage();
web_walkerX
  • 840
  • 10
  • 19

1 Answers1

1

The error message is telling you there is no object at the location of the reference you're using. It's not possible to use getDownloadURL() with a path that isn't an actul file object. You can't use it on prefixes (folders).

If you're trying to get a download URL for each object that you listed with listFilesAndDirectories, you would have to call getDownloadURL() on each and every file object that it finds (not just once for the entire prefix).

It would be more like this:

function listFilesAndDirectories(reference, pageToken) {
  return reference.list({pageToken}).then(result => {
    result.items.forEach(ref => {
      // call getDownloadURL on every object reference
      ref.getDownloadURL().then(url => {
        console.log(`${fullPath}: ${url}`)
      })
    });

    if (result.nextPageToken) {
      return listFilesAndDirectories(reference, result.nextPageToken);
    }

    return Promise.resolve();
  });
}
Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
  • the image URLs are being logged to console, am faced with extracting the URL and placing it as a URI in an image – web_walkerX Jun 15 '20 at 03:02
  • i have tried template literals, i tried calling the function and using the dot notaion to extract the URL but the url is not accessible outside the function scope – web_walkerX Jun 15 '20 at 03:04
  • That sounds like a completely different problem - please post that to a new question to explain what you're dealing with now. – Doug Stevenson Jun 15 '20 at 03:23
  • https://stackoverflow.com/questions/62381079/extract-url-from-function-for-image-resource – web_walkerX Jun 15 '20 at 03:53