Angular 14 Project to Upload Multiple Images 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" *ngFor="let url of urls" width="100" height="100"/>


<input type="file" multiple (change)="selectFiles($event)">

Basically we have the simple input field where we allow the user to select the image file and also we have attached the multiple attribute to select multiple files and then we are showing the image in live preview using the img tag. And for this we are using the ngFor directive

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 {
 urls = []

 selectFiles(event){
   
   if(event.target.files){

     for(let i=0;i<File.length;i++){

      let reader = new FileReader()

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

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



     }
   
   }   

 }

}

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

urls = []

selectFiles(event){

if(event.target.files){

for(let i=0;i<File.length;i++){

let reader = new FileReader()

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

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

this.urls.push(event.target.result)

}