Angular - Change detection on file input field only works once

Question

The problem is that I have a file input field that takes only one file at a time, I need it to be like this.

If I try to upload one file, everything is fine. But if I need to upload more files it seems like the "change" handler method is not being called unless I reload the page, which is not what anyone would want.

The HTML looks like this:

<div class="col-xs-7"> <button class="btn btn-primary" [disabled]="isLoadingModal" (click)="activityFileInput.click()"> archivo</button> {{ newActivity.fileName }} <input type="file" id="activity-file-input" [disabled]="isLoadingModal" (change)="selectFile(activityFileInput.files[0])" #activityFileInput hidden> </div>

The function in the component is:

selectFile(file: File): void { console.log('Hello'); if(file == undefined) return; this.newActivity.fileName = file.name; this.newActivity.file = file; }

On the first file upload the "Hello" shows, no problem. But the method doesn't seem to be called more than once. How can this be solved?

Right before calling the server I set to true, and when I get a response i set it back to false. Just UI stuff right there. — Fer VT
– Fer VT, Commented Mar 20, 2018 at 0:25

jonhid · Accepted Answer · 2018-03-20 00:47:32Z

Set the value of the input to null in the onclick event...

<input type="file" id="activity-file-input" onclick="this.value = null" [disabled]="isLoadingModal" (change)="selectFile(activityFileInput.files[0])" #activityFileInput hidden>

Muhammad Umar · Accepted Answer · 2021-11-16 13:50:46Z

it happens only when you try to upload the same file/image. When (change) sees the same event, it doesn't trigger the given method. To fix it add (click)="$event.taget.value=null" in your input tag

Collectives™ on Stack Overflow

Angular - Change detection on file input field only works once

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related