Preview multiple image before upload file in Angular

Question

How can I preview multiple images that I have selected before uploading them in Angular?

I have managed to do it but only with one image, even though I select several, only one recognizes me. I think the use of *ngFor is a good alternative but I'm not sure how to raise it. Any ideas?

myComponent.html

<img *ngIf="url" [src]="url" class="rounded mb-3" width="180">
<input type="file" multiple (change)="detectFiles($event)">

myComponent.ts

detectFiles(event) {
this.selectedFiles = event.target.files;
if (event.target.files && event.target.files[0]) {
  var reader = new FileReader();
  reader.onload = (event: any) => {
    this.url = event.target.result;
  }
  reader.readAsDataURL(event.target.files[0]);
}
}

Martin Parenteau · Accepted Answer · 2018-02-23 02:29:26Z

36

As shown in this stackblitz, you can store the image URLs in an array and display them with ngFor:

<div>
    <img *ngFor="let url of urls" [src]="url" class="rounded mb-3" width="180">
</div>
<input type="file" multiple (change)="detectFiles($event)">

The array of URLs is filled in detectFiles:

export class AppComponent {

  urls = new Array<string>();

  detectFiles(event) {
    this.urls = [];
    let files = event.target.files;
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(file);
      }
    }
  }
}

edited Feb 23, 2018 at 2:29

answered Feb 23, 2018 at 1:41

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashish S Over a year ago

This works but hangs dom with high resolution image and number of images are high may be due huge base64 data. @ConnorsFan can you please suggest any resolution for this?

Collectives™ on Stack Overflow

Preview multiple image before upload file in Angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related