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

Question

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?

Sanction

I don't get the problem. How is this Angular or typescript related? – Cluck

The question you linked has no accepted answer. Also, the other questions talks about uploading a file and showing the path from where it was uploaded. DO you also have an uploaded file or do you want to show the file directly form your local disc? – Shaffert

Answer 1

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

Dike

Thanks. This worked perfectly fine. Can you please explain what's happening in the code. You see I am new to Javascript and typescript and these syntax of the code is bit overwhelming. – Sanction

Glad to hear. Learned something new. Never heard of fake path before. – Cluck

@GünterZöchbauer This doesn't work, I don't know if its release versions. I am on Angular 2.3.1 and it errors out on this line: this.url = event.target.result; And when I add console log inside the reader.onload method, I get: { "isTrusted": true } – Quadrillion

Sorry, no idea. Perhaps worth a new question with more details. – Cluck

@Quadrillion Changing reader.onload = (event) to reader.onload = (event:any) work for me. It's seems like it's an issue with Angular reader interface. – Lazuli

I see. That's some compiler setting AFAIK. I use TS only in Plunker where these type annotations don't matter. For real development I use only Dart and don't know these TS details. – Cluck

I am getting error. property " URL"does not exists on mBaseReader. – Bey

@KunvarSingh please create a new question with your code – Cluck

@HasmukhBaldaniya thanks for the improvement. I don't get what value the comment adds though. – Cluck

You are welcome @GünterZöchbauer. but 'Event' type doesn't work. Please Replace with 'any' – Bergamo

do some changes here event:Event => (event:any) & reader.onload = (event:any) also in angular 4 – Catachresis

@GünterZöchbauer: What about multiple file upload? – Carolincarolina

@Carolincarolina then you'll need to iterate over all entries in event.target.files instead of just the first one event.target.files[0] – Cluck

Answer 2

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' 

Quadrillion

Quite unlikely this code will work. function(e:any){ should be (e:any) => { otherwise this won't point to the class containing the code (which is quite likely what you want). – Cluck

Answer 3

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

}

Duque

Answer 4

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

}

Cupp