Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to preview picture stored in the fake path in Angular 2/Typescript?

Browsers don't take full path of local disc, instead they concatenate the filename with fakepath. Is there any way to access the file (image) from fakepath using typescript or angular 2?

I have this:

<img src="{{path}}" /> 

where my path variable stores the 'fakepath':"C:\fakepath\pic.jpg" in my .ts file.

Edit This question discusses the way to preview image file from fakepath using javascript. If it is possible with Js, then is it not the same in case of ts?

like image 411
Karan Desai Avatar asked Aug 22 '16 08:08

Karan Desai


1 Answers

This should do what you want:

<input type='file' (change)="readUrl($event)"> <img [src]="url"> 
readUrl(event:any) {   if (event.target.files && event.target.files[0]) {     var reader = new FileReader();      reader.onload = (event: ProgressEvent) => {       this.url = (<FileReader>event.target).result;     }      reader.readAsDataURL(event.target.files[0]);   } } 
like image 163
Günter Zöchbauer Avatar answered Sep 22 '22 10:09

Günter Zöchbauer