Angular input file: Selecting the same file

Question

I have the following line in HTML:

<input type="file" #fileInput style="display: none"  accept=".xml" (change)="OnFileSelected($event)"/>

Upon selecting a file, the OnFileSelected callback is invoked. But then, if I select the same file again, this callback is not called.

Can you please help?

That looks like code to be consumed by Angular, not straight HTML. You may want to edit your question to update the tags accordingly. — Heretic Monkey
– Heretic Monkey, Commented Dec 23, 2019 at 20:48
Does this answer your question? How to detect input type=file "change" for the same file? — Aanand Kainth
– Aanand Kainth, Commented Dec 23, 2019 at 20:50
Does this answer your question? HTML input file selection event not firing upon selecting the same file — Vinay Sharma
– Vinay Sharma, Commented Sep 11, 2023 at 10:06

Anand G · Accepted Answer · 2021-03-29 15:10:16Z

32

onChange will not detect any change to input type file if the same file has been selected. There are 2 possible ways to make onChange working on same file selection which I would recommend

Either you need to add an event like onClick to clear the value so that the change event will work.

<input type="file" #fileInput style="display: none" accept=".xml" (change)="OnFileSelected($event)" (click)="this.value=null"/>
Add multiple attribute to the input element

<input type="file" #fileInput style="display: none" accept=".xml" (change)="OnFileSelected($event)" multiple/>

Hope this helps.

EDIT:

As suggested by others in comments, you can achieve it like below

<input type="file" #fileInput style="display: none" accept=".xml" (change)="OnFileSelected($event)" (click)="$event.target.value=null"/>

edited Mar 29, 2021 at 15:10

answered Dec 23, 2019 at 20:58

Anand G

3,2102 gold badges24 silver badges30 bronze badges

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

2 Comments

Supun Kavinda Over a year ago

(click)="this.value=null" here this.value is not work for me. but (click)="$event.target.value=null" is worked.

Sumant Singh Over a year ago

Thanks @SupunKavinda (click)="$event.target.value=null" this one worked for me also

ASTIN JOHNSON E · Accepted Answer · 2023-10-11 04:03:14Z

3

<input type="file" #fileInput style="display: none" accept=".xml" (change)="OnFileSelected($event)" (click)="fileInput.value = ''"/>

please add (click)="fileInput.value = ''"

In 2023 with Angular 16 this works like a charm

answered Oct 11, 2023 at 4:03

ASTIN JOHNSON E

854 bronze badges

Comments

Anders Lindin · Accepted Answer · 2022-04-28 05:45:15Z

1

You can also connect to your input element with a element reference and just set it to null when finished.

@ViewChild('fileInput') fileInput: ElementRef;

this.fileInput.nativeElement.value = null;

answered Apr 28, 2022 at 5:45

Anders Lindin

111 bronze badge

Comments

Zvi Vered · Accepted Answer · 2019-12-24 04:43:46Z

0

Based on Anand's answer I used the following code:

<input type="file" #fileInput style="display: none"  accept=".xml" (change)="OnFileSelected($event)" [(ngModel)]="value"/>

In the ts code:

  public OnFileSelected (event)
  {
    let fileList: FileList = event.target.files;
    this.value = undefined;
  }

Best regards, Zvika

answered Dec 24, 2019 at 4:43

Zvi Vered

6555 gold badges11 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular input file: Selecting the same file

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related