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?

I don't get the problem. How is this Angular or typescript related? — Günter Zöchbauer, Aug 22 '16 at 08:41
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? — Sebastian Sebald, Aug 22 '16 at 08:53

score 95 · Accepted Answer · edited Jul 13 '18 at 12:21

95

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

edited Jul 13 '18 at 12:21

Ruben

7,959
12
58
89

answered Aug 22 '16 at 08:53

Günter Zöchbauer

490,478
163
1,733
1,404

1

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. – Karan Desai Aug 22 '16 at 09:12
Glad to hear. Learned something new. Never heard of fake path before. – Günter Zöchbauer Aug 22 '16 at 09:13
@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 } – user875139 Jan 26 '17 at 22:08
Sorry, no idea. Perhaps worth a new question with more details. – Günter Zöchbauer Jan 27 '17 at 04:07
7

@user875139 Changing `reader.onload = (event)` to `reader.onload = (event:any)` work for me. It's seems like it's an issue with Angular reader interface. – mickdev Jan 27 '17 at 07:21
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. – Günter Zöchbauer Jan 27 '17 at 07:37
I am getting error. property " URL"does not exists on mBaseReader. – Kunvar Singh Oct 26 '17 at 05:41
@KunvarSingh please create a new question with your code – Günter Zöchbauer Oct 26 '17 at 07:29
@HasmukhBaldaniya thanks for the improvement. I don't get what value the comment adds though. – Günter Zöchbauer Nov 03 '17 at 07:12
You are welcome @GünterZöchbauer. but 'Event' type doesn't work. Please Replace with 'any' – Hasmukh Ahir Nov 03 '17 at 07:33
do some changes here **`event:Event => (event:any)`** & `reader.onload = (event:any)` also in angular 4 – Anup Gupta Nov 04 '17 at 20:26
@GünterZöchbauer: What about multiple file upload? – baj9032 Jun 14 '18 at 12:42
1

@baj9032 then you'll need to iterate over all entries in `event.target.files` instead of just the first one `event.target.files[0]` – Günter Zöchbauer Jun 14 '18 at 12:53

score 10 · Answer 2 · answered Jan 26 '17 at 22:25

10

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'

answered Jan 26 '17 at 22:25

user875139

1,379
4
20
39

2

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). – Günter Zöchbauer Jan 27 '17 at 07:38

score 4 · Answer 3 · answered Sep 28 '17 at 20:41

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

}

score 4 · Answer 4 · answered Oct 12 '18 at 12:30

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

}

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

4 Answers4

Linked