CODEWITHSUNDEEP
angulartypescript
Gadheyan .t.s
Gadheyan .t.s

Reputation: 407

How to get path from file upload input in angular 4

I want to upload an image and create a preview of it in angular 4.
The template is given below:

<div>
  <input type="file" (onchange)="handleUpload($event)">
  <img [src]="Logo" >
</div

I want to call a function handleUpload() whenever a file is chosen. This function sets the value of the variable Logo to the path of the file chosen. I am not able to get the path because the function handleUpload($event) is not called.
The component class is given below:

 export class App {
 Logo:string;

 handleUpload(e):void{
    this.Logo = e.target.value;

 }

  constructor() {

  }
}

I don't understand what is wrong with my code. Demo

Upvotes: 8

Views: 58502

Answers (3)

Vignesh K
Vignesh K

Reputation: 279

get full path of selected file on change of using Javascript,Typescript,Angular.

<input type="file" class="fileControlInput" multiple="multiple" accept=".png,.jpge/*"
       (change)="getFiledetials($event.target)" />

getFiledetials(element) {
   console.log(element.value);
}

Upvotes: 0

Prashobh
Prashobh

Reputation: 9542

Show preview image - Example code

<input type="file" (change)="showPreviewImage($event)">
<img [src]="localUrl" *ngIf="localUrl" class="imgPlaceholder">



 localUrl: any[];
    showPreviewImage(event: any) {
        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.localUrl = event.target.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    }

Demo and more info

Upvotes: 8

unitario
unitario

Reputation: 6535

In angular you write javascript events without the "on" suffix.

Change:

<input type="file" (onchange)="handleUpload($event)">

To:

<input type="file" (change)="handleUpload($event)">

Upvotes: 9

Related Questions