Input File onchange event not firing

Question

I am trying to fire onchange event everytime a file is selected. It does fire if the file I select is different, however, I wanted to fire even if the same file is selected twice.

html

 <input name="file" type="file" (change)="onChange($event)" style="width:80%" />

component

onChange(event: any) { let files = event.srcElement.files; this.files = files; event= null; }

You have plenty of other DOM events. If change don't meet your expectation, you can try (input) or (select) or ... see all the DOM events here : w3schools.com/jsref/dom_obj_event.asp — mickdev
– mickdev, Commented Feb 21, 2017 at 0:30

Owain van Brakel · Accepted Answer · 2017-02-21 03:00:40Z

66

The most reliable way to achieve this cross browser and without having to change much code is to set the value of the input to null on click.

onclick="this.value = null"

So your input would look like this

<input name="file" type="file" onclick="this.value = null" (change)="onChange($event)" style="width:80%"/>

Here is an working example: plnkr

answered Feb 21, 2017 at 3:00

Owain van Brakel

3,3591 gold badge17 silver badges22 bronze badges

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

6 Comments

LeO Over a year ago

one could as well write onclick="value = null" cuz this is not required in the template! ´

Webber Over a year ago

i have tried this, but not getting the hit in the change event, it will be really greatfull if you can have look at my sample code link

Owain van Brakel Over a year ago

@Webber here you go sir stackblitz.com/edit/template-reader-hzcwti

Runtime Terror Over a year ago

Why does this work only with onclick and not with (click)?

Owain van Brakel Over a year ago

@Gabriel You want to change the value of the input, not the value of an angular variable. The change of the input value will trigger an angular function.

|

Code Guru · Accepted Answer · 2020-05-29 09:29:23Z

You need to clear the value of file input. As if you select the file it matches with the value and if value is same then no change event.

You need to use native onclick of JS

<input name="file" type="file" onclick="value = null" (change)="onChange($event)" style="width:80%"/>

if you use Angular's (click) then it will set the ts variable value which can cause error as it will be not declared in your ts file.

If you want to use angualr's (click) event then use template variable like this

<input name="file" type="file" (click)="myInputFile.value = null" (change)="onChange($event)" style="width:80%" #myInputFile/>

Goutham Harshith · Accepted Answer · 2022-07-05 06:21:25Z

I have fixed this problem by setting $event.target.value = '' on click event

<input type="file" name="file" id="File" aria-label="File" class="file" (click)= "$event.target.value = ''" (change)="uploadData($event)" accept=".csv, .xlsx">

This worked for me, you can upload a same file multiple times now.

desertnaut · Accepted Answer · 2024-10-08 21:26:06Z

I have fixed this issue by setting input element reference i.e. this.bannerUploader.nativeElement.value = null.

Html:

 <input type="file" accept="image/*" hidden #banner (change)="fileChanged($event)" /> <button type="button" (click)="fileUploadClick()"></button>

TypeScript:

 @ViewChild('banner') bannerUploader: ElementRef; fileUploadClick(){ this.bannerUploader.nativeElement.value = null; this.bannerUploader.nativeElement.click(); }

Collectives™ on Stack Overflow

Input File onchange event not firing

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Linked

Related