CODEWITHSUNDEEP
htmlfileinput
Zvi Vered
Zvi Vered

Reputation: 623

Angular input file: Selecting the same file

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?

Upvotes: 10

Views: 14313

Answers (4)

ASTIN JOHNSON E
ASTIN JOHNSON E

Reputation: 76

<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

Upvotes: 2

Anders Lindin
Anders Lindin

Reputation: 11

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;

Upvotes: 1

Anand G
Anand G

Reputation: 3210

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

Upvotes: 32

Zvi Vered
Zvi Vered

Reputation: 623

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

Upvotes: 0

Related Questions