Angular: How to loop image files in Firebase storage using *ngFor

Question

I'm building a web app with image upload features.

I can successfully upload an image to Firebase storage folder named 'uploads' How can I display images in this 'uploaded' folder on HTML using *ngFor? I'm using AngularFire2, Angular 6.

  upload() {
    const file = this.selectedFiles.item(0);
    this.selectedFiles = undefined;

    this.currentFileUpload = new FileUpload(file);
    this.uploadService.pushFileToStorage(this.currentFileUpload, this.progress);
  }


  public saveFileData(fileUpload: FileUpload) {
    this.db.list(`${this.basePath}/`).push(fileUpload);
  }

Ecordero Ecordero · Accepted Answer · 2018-08-09T20:57:52

If you're using a FileList object to hold your files you can do something like..

<ul *ngIf="selectedFiles">
    <li *ngFor="let file of selectedFiles">
        <img src="URL.createObjectURL(file)">
    </li>
</ul

I'm not sure why you set your this.selectedFiles var to undefined, I would think you have to have the image files somewhere in your component.ts

After getting the images you want to display from your db into your component.ts using a FileList obj or a File[] , you can use the code above in your component.html to display them.

Angular: How to loop image files in Firebase storage using *ngFor

1 Answers