Wednesday, 17 January 2018

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

    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 ( &&[0]) {
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.localUrl =;

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


  1. how would I turn this into a multiple image field with multiple previews?

    1. Yes that is possible, but I haven't yet written about it.

  2. Is there any way to rotate the image to vertical without using css?

  3. how to adjust size of the image?

  4. The demo page isn't loading for me.