Show preview image while uploading - Angular

AngularPreview imageUpload

In this article we are going to discuss about showing a preview image while uploading. This can be achieved by using very less code. Let's check below example

Preview image while uploading

---

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '<div>'
        + '<input type="file" (change)="showPreviewImage($event)">'
        + '<img [src]="localUrl" *ngIf="localUrl" class="imgPlaceholder">'
        + '</div>',
})

export class AppComponent {
    localUrl: any[];
    constructor() { }
    showPreviewImage(event: any) {
        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.localUrl = event.target.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    }
}

While clicking on showPreviewImage method we are taking the selected image url and assigning to localUrl. We can a show a preview image and upload the selected file/image to backend as well. Check this link for that: - File upload and send data to backend. Here I have used *ngIf to hide the preview image section until it is available. You can do more things using Angular 4 ngIf. Check the difference between Angular 2 ngIf and Angular 4 ngIf here.

We are done. You can use css to improve the look and feel. In this article we have discussed about showing a preview image while uploading.

Angular 2+Angular 4/5Preview imageUpload

Related Info

1. File/Image upload validation- Angular 4

2. File/Image upload and send data to backend

3. Rating star component - Angular 4

4. Date filtering and formatting - Angular 4