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

17

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>

answered Mar 20, 2018 at 0:47

jonhid

2,1451 gold badge14 silver badges18 bronze badges

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

1 Comment

Ledjon Over a year ago

setting the value to null worked fine for me. Thank you :)

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

-1

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

answered Nov 16, 2021 at 13:50

Muhammad Umar

1,7292 gold badges10 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular - Change detection on file input field only works once

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related