Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 22, 2023

 

 

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

 

 

1
2
3
4
<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

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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)
     }
 
 
 
     }
  
   }  
 
}
 
}

 

 

 

 

Recent Posts

  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme