JavaScript - Load a file twice in a row

Question

Good day,

I have the following code to load a ".TXT" file into a web page

function load(event) {
  let fr = new FileReader();
  fr.onload = function() {
    let load0 = JSON.parse(fr.result);
    console.log(load0);
    console.log("Ready!");
  };
  fr.readAsText(event.target.files[0]);
}

function loadInput(event) {
  document.getElementById("loadInputButton").click();
}

<html>

<body>
  <input type="button" onclick="loadInput(event)" />
  <input id="loadInputButton" type="file" accept="text" onchange="load(event)" />
</body>

</html>

It works fine but only once. After I once load the file it will not work anymore. I try to load the same file again but the function produces nothing.

May I ask for your help solving it?

Thank you, Eugene

Yes. When I said "works fine" I meant it doesn't have the problem you describe. Does it work for you? — Barmar, Feb 23 '22 at 19:18
@Barmar No, I extracted the whole code into a new HTML file. It does not load the file twice for me. I must be doing something wrongly. — Evgenii Danilov, Feb 23 '22 at 19:27
But what if you just run the code from jsfiddle? When it doesn't work, do you get any errors in the console? — Barmar, Feb 23 '22 at 19:28
OK, I can reproduce with the updated code you posted. So it has something to do with emulating clicks, which wasn't in the original question. — Barmar, Feb 23 '22 at 19:31
@Barmar I am actually not familiar to jsfiddle. But I figured it out. The function is called when the with id = "loadInputButton" is changed in value. But if I load the same file with the same name the function does not fire. — Evgenii Danilov, Feb 23 '22 at 19:31
@Barmar Do you happen to know how to clear the loaded file name? — Evgenii Danilov, Feb 23 '22 at 19:33
See https://stackoverflow.com/questions/20549241/how-to-reset-input-type-file — Barmar, Feb 23 '22 at 19:34

score 0 · Accepted Answer · answered Feb 23 '22 at 19:37

Clear the value of the input after using it, so that the change event will fire when you select the same file.

function load(event) {
  let fr = new FileReader();
  fr.onload = function() {
    let load0 = JSON.parse(fr.result);
    console.log(load0);
    console.log("Ready!");
    event.target.value = '';
  };
  fr.readAsText(event.target.files[0])
}

function loadInput(event) {
  document.getElementById("loadInputButton").click();
}

<html>

<body>
  <input type="button" onclick="loadInput(event)" />
  <input id="loadInputButton" type="file" accept="text" onchange="load(event)" />
</body>

</html>

JavaScript - Load a file twice in a row

1 Answers1