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

unitario · Accepted Answer · 2017-05-23 08:07:33Z

9

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

Change:

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

To:

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

answered May 23, 2017 at 8:07

unitario

6,5854 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prashobh · Accepted Answer · 2018-01-22 06:26:51Z

8

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

answered Jan 22, 2018 at 6:26

Prashobh

9,58415 gold badges65 silver badges92 bronze badges

Comments

metodribic · Accepted Answer · 2021-12-17 06:24:37Z

0

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

edited Dec 17, 2021 at 6:24

metodribic

1,74919 silver badges30 bronze badges

answered Dec 16, 2021 at 7:38

Vignesh K

2893 silver badges3 bronze badges

Collectives™ on Stack Overflow

How to get path from file upload input in angular 4

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related