Preview Image In Angular 7 Before Upload

Hello to all, welcome to therichpost.com. In this post, I will tell you, Preview Image In Angular 7 Before Upload.

Angular 7 is just released and it is growing day by day very fastly and famous as single page application. In this post, I am showing image preview before upload and this is very helpful for every Angular developer.

I am doing this without using any external library.

Here is the working image:

Preview Image In Angular 7 Before Upload

Here are the working steps you need to follow:

1. Here are the common basics command for installing Angular 7 application:

$ npm install -g @angular/cli

$ ng new angularpreviewimage // Set Angular7 Application on your pc

cd angularpreviewimage // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

2. Now add below code into your app.component.html file:

<h3>Angular7 Image Preview before Upload:</h3><br/><br/>
<img [src]="url" height="200" *ngIf="url"> <br/><br/>
<input type='file' (change)="onSelectFile($event)">

3. Now add below code into your app.component.ts file:

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public imagePath;
  url: string;
  onSelectFile(event) { // called each time file input changes
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();
      this.imagePath = event.target.files;
      reader.readAsDataURL(event.target.files[0]); // read file as data url
      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = reader.result; //add source to image
        
      }
    }
     }
}

This is it, if you have any query related to this post, then please do comment below or ask question.

Thank you,

Alisha,

TheRichPost