How to fix HTML input file selection event not firing upon selecting the same file with JavaScript?

Spread the love

Sometimes, we want to fix HTML input file selection event not firing upon selecting the same file with JavaScript.

In this article, we’ll look at how to fix HTML input file selection event not firing upon selecting the same file with JavaScript.

How to fix HTML input file selection event not firing upon selecting the same file with JavaScript?

To fix HTML input file selection event not firing upon selecting the same file with JavaScript, we set its value to null when it’s clicked.

For instance, we write

const input = document.querySelector("input");

input.onclick = (e) => {
  e.target.value = null;
};

input.onchange = (e) => {
  console.log(e.target.value);
};

to select the file input with querySelector.

Then we set input.onclick to a function that sets the file input’s value to null with e.target.value = null;.

Then when we select the same file, we should see the file value logged in input.onchange.

Conclusion

To fix HTML input file selection event not firing upon selecting the same file with JavaScript, we set its value to null when it’s clicked.

Leave a Reply

Your email address will not be published. Required fields are marked *