Clash Royale CLAN TAG#URR8PPP

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

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);



1 Answer
1

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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.