How to get path from file upload input in angular 4

Question

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

Answer 1

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

Change:

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

To:

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

Answer 2

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