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, Dec 23 '19 at 20:48
Does this answer your question? [How to detect input type=file "change" for the same file?](https://stackoverflow.com/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file) — Aanand Kainth, Dec 23 '19 at 20:50

Anand G · Accepted Answer · 2021-03-29T15:10:16.500

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

(click)="this.value=null" here this.value is not work for me. but (click)="$event.target.value=null" is worked. — Supun Kavinda, Mar 17 '21 at 13:06
Thanks @SupunKavinda (click)="$event.target.value=null" this one worked for me also — Sumant Singh, Mar 29 '21 at 11:04

score 1 · Answer 2 · answered Apr 28 '22 at 05:45

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 '22 at 05:45

Anders Lindin

11
1

score 0 · Answer 3 · answered Dec 24 '19 at 04:43

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

Angular input file: Selecting the same file

3 Answers3