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?

Answer 1

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

1. 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"/>

2. 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"/>