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?

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]);
  }
}

Adding to @GünterZöchbauer answer, this wasn't working for me until I added this:

reader.onload = function(e:any){
   this.url = e.target.result;
}

Prior to adding 'any', I was getting the error:

property 'result' does not exist on type 'eventtarget' 

It works when you change the event to type of any. In that way, Angular can access any of its property.

readUrl(event) {
if (event.target.files && event.target.files[0]) {
  var reader = new FileReader();

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

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

}


It's working

example.component.html

<input type="file" (change)="onFileChanged($event)" required />
<img [src]="imageShow" height="200"> <br/>

example.component.ts

imageShow: any= '';
onFileChanged(event) {
  this.file = event.target.files[0]
  var reader = new FileReader();
  reader.readAsDataURL(event.target.files[0]);
  reader.onload = (event) => {
   this.imageShow = (<FileReader>event.target).result;
 }

}


Need Your Help

fabric appears to start apache2 but doesn't

ssh ubuntu-10.04 python-2.6 fabric apache2.2

I'm using fabric to remotely start a micro aws server, install git and a git repository, adjust apache config and then restart the server.