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 |
<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
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 |
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 } } } } |