FileReader event listener cannot be called more than once

Question

I have the following Typescript function that when called opens a window to request a file, and after the user makes a selection it prints in the console the file contents.

The first time it works fine, but the problem is that if I call it twice, it doesn't work. The second time it opens the window, but when the file is selected it does nothing. What is wrong with this function?

<input id="file-input" type="file" name="name" style="display: none;" />


printFile(){

    var input = document.getElementById('file-input');

    input.addEventListener('input', () => {

        var uploadedFile = (input as HTMLInputElement).files[0];

        var reader = new FileReader();

        reader.addEventListener('load', () => {
            console.log(reader.result);
        });
          
        reader.readAsText(uploadedFile);

    });
          
    input.click();

}

@Kaiido you are right, this doesn't work if you select the same file, but what's the solution? — ps0604, Sep 04 '20 at 01:51

score 2 · Accepted Answer · answered Sep 03 '20 at 22:34

2

You are adding a listener to FileReader and then instantiating it again. The correct way of working should look like (a similar sample but using images):

HTML

<input
  #fileInput
  type="file"
  accept="image/png, image/jpeg"
  (change)="handleChosenFile($event)"
/>

Typescript

handleChosenFile(event: Event) {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files.length) {
    this.selectedFile = target.files.item(0);
    const reader = new FileReader();
    reader.readAsDataURL(this.selectedFile);
    reader.onload = () => {
      // Your function
    };
  } else {
    // Your alert to "no file selected"
  }
}

answered Sep 03 '20 at 22:34

Lucas Simões

589
5
10

And they add a new listener to the new instance. Their code should work. – Kaiido Sep 03 '20 at 23:16
Lucas, `handleChosenFile` is not triggered if I select the same file twice – ps0604 Sep 04 '20 at 01:55
1

adding `onclick="this.value=null;" ` to the file element worked selecting the file twice – ps0604 Sep 04 '20 at 02:19
I usually hide the file selection input and put a button in its place. This code uses that method as an example. Thanks for complementing the answer. – Lucas Simões Sep 04 '20 at 14:06

score 1 · Answer 2 · answered Sep 03 '20 at 22:33

1

 reader.addEventListener('load', () => {
            console.log(reader.result);
        });

should be

 reader.addEventListener('load', (event) => {
            console.log(event.target.result);
        });

answered Sep 03 '20 at 22:33

JB_DELR

737
1
4
7

this was also useful – ps0604 Sep 04 '20 at 02:17

FileReader event listener cannot be called more than once

2 Answers2