How to get-download a list of images-files from Firebase storage

Question

I have a website that has cards in grid with image inside and title for example

and I want to get a list of images from firebase storage, the problem is if I store the same image file my other image files with the same image are broken,

How I can get a list of images from firebase storage. Or what is the best way to store image file with combine firebase database my code to add new card is like this I store the image metadata download URL

const storageRef = firebase.storage().ref();

for (let selectedFile of [(<HTMLInputElement>document.getElementById('image')).files[0]]){

  let path = `/${this.prosforesFolder}/${selectedFile.name}`;
  let iRef = storageRef.child(path);

  iRef.put(selectedFile).then((snapshot) => {

    prosfora.imageUrl = snapshot.downloadURL;
    prosfora.image = selectedFile.name;
    prosfora.path = path;
    // firebase.database().ref('/listings').push(listing);
    return this.prosfores.push(prosfora);
  });

}

but what I get is if I store 6 files with the same image file name only the last image can render the other 5 is broken

to get the images from fire base I just cal this function

// gets the list of ypiresies 
this.firebaseService.getProsfores().subscribe(prosfores => {

  this.prosfores = prosfores;

  if (prosfores.length > 0) {
    this.prosforesExist = true;
  } else {
    this.prosforesExist = false;
  }

  console.log(prosfores);

  // afto kanei hide to preloader
  $( ".preloader-wrapper" ).hide();

  $(document).ready(function(){
    $('.gallery-expand').galleryExpand({
      // dynamicRouting : true
      // defaultColor: 'red'
      // fillScreen : 'true'
    });
  });

});

What I do wrong, there is any way that I can change the file name before I upload the file on firebase storage ???

like image.png image-v2.png image-v3.png

How I can do that ??

Any Help is gonna be welcome

I recommend watching Zero to App (https://www.youtube.com/watch?v=xAsvwy1-oxE) and checking out it's source code (https://gist.github.com/puf/8f67d3376d80ed2d02670d20bfc4ec7d). Those show you how to upload files with unique names, sync them through the database, and display them in a list in an app. — Mike McDonald, May 11 '17 at 16:46
Possible duplicate of [How to get an array with all pictures?](http://stackoverflow.com/questions/37335102/how-to-get-an-array-with-all-pictures) — Mike McDonald, May 11 '17 at 16:47

score 0 · Answer 1 · answered Sep 13 '21 at 20:27

As a starting point to your problem I can offer you to use listAll function to gather first all your images from database. Firebase place it in the website List files with Cloud Storage on Web According to that base function you can move on to what you need by using ItemRefs under ListRef :

function AllImages() {
  const storageRef = firebase.storage().ref();
  // Create a reference for folder 'formimages'
  var listRef = storageRef.child("formimages");
  // Find all the prefixes and items.
  listRef
    .listAll()
    .then((res) => {
      res.prefixes.forEach((folderRef) => {
        // All the prefixes under listRef.
        // You may call listAll() recursively on them.
      });
      res.items.forEach((itemRef) => {
        // All the items under listRef.
        itemRef.getDownloadURL().then((url) => {
          imagesArray.push(url);
          console.log(imagesArray);
        });
      });
    })
    .catch((error) => {
      // Uh-oh, an error occurred!
    });
  // [END storage_list_all]
}

How to get-download a list of images-files from Firebase storage

1 Answers1