Angular 14 Project to Upload Image With Live Preview Using FileReader API in Browser Using TypeScript

Welcome folks today in this blog post we will be uploading image with live preview using filereader api in browser using typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new sampleapp

And now you need to go to app.component.html file and copy paste the following code

app.component.html

<img [src]="url" width="100" height="100"/>
<input type="file" (change)="selectFile($event)">

1 2	<img [src]="url" width="100" height="100"/> <input type="file" (change)="selectFile($event)">

Basically we have the simple input field where we allow the user to select the image file and then we are showing the image in live preview using the img tag.

Now we need to go to app.component.ts file and copy paste the following code

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
 url = "##pastetheurloftheimage"

 selectFile(event){
   
   if(event.target.files){
     
     let reader = new FileReader()

     reader.readAsDataURL(event.target.files[0])

     reader.onload = (event: any) => {
        this.url = event.target.result
     }
   
   }   

 }

}

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

})

export class AppComponent {

url = "##pastetheurloftheimage"

selectFile(event){

if(event.target.files){

let reader = new FileReader()

reader.readAsDataURL(event.target.files[0])

reader.onload = (event: any) => {

this.url = event.target.result

}