<input type="file"> change event firing again when navigating back to the page

user_6157849 0
Viewed 82

I have a very basic file uploader. I upload a file, which triggers the change event (console.log). I navigate to a different page, then press the back button. The change event triggers again (the event is logged again to the console).

I am using Chrome. It doesn't happen with text inputs; only file. Anyone know why?

<input type="file" />

<script>
    const input = document.querySelector("input[type=file]");
    input.addEventListener("change", console.log, { once: true });
</script>
html javascript
1 Answers

Using Chromium (Brave) the file seems to be cached. So, when you go back, the file is loaded back into the input, triggering the change event.

One workaround would be to set the inputs value to an empty string on page-load:

<input type="file" />

<script>
    const input = document.querySelector('input[type=file]');

    window.addEventListener('load', () => (input.value = ''));
    input.addEventListener('change', console.log);
</script>
user_127019490
Related