Wednesday, January 17, 2018

Show preview image while uploading - Angular 4

Angular 4Preview 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]);
        }
    }
}

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 4Preview imageUpload

Related Info

1. File/Image upload validation- Angular 4

2. File/Image upload and send data to backend

3. Show preview image while uploading file/image

4. Rating star component - Angular 4

5. Date filtering and formatting - Angular 4

No comments :

Post a Comment