File Input Bug in Resize Multiple Images Tool

While working on the Resize Multiple Images tool, I encountered a frustrating bug: the file input element stopped responding after clearing previously selected images and attempting to reselect the same files. The input appeared inactive, and no new selection was registered. After a thorough script audit, I discovered that both the native JavaScript onchange event and the jQuery change event were failing to trigger under these conditions.

If you're building a web application that handles file uploads, this issue might sound familiar. It's a common pitfall with <input type="file"> elements, especially in browsers like Chrome and Safari, where selecting the same file twice doesn't fire the change event.

Whether you're using vanilla JavaScript or jQuery ($('#file').change(function () { })), this behavior can silently break your file handling logic unless you explicitly reset the input value.

🚀 A simple solution to get rid of this issue will be, to clear the file input value. I’ll show you how.

Let's see the bug (or the issue) first.

Here’s the file input element with the "onchange()" event.

<input  type="file" id="file" multiple onchange="alert(this.value);" />

Try it

When you select a file for the first time, the onchange event triggers as expected, displaying an alert with the file details. However, if you choose the same file again, the onchange event fails to fire, resulting in no alert and no response from the input.

Note: Interestingly, I found this issue in Chrome and Safari browsers. "FireFox" however, responded well.

Something similar happened with jQuery change event. See this code 👇.

$(document).ready(function () {
    $('#file').change(function () {
      alert (this.files.length);
    });
});

✅ To resolve this issue in JavaScript, simply reset the file input by setting its value to null after completing your desired task. This ensures the onchange event will trigger even when the same file is selected again. Here's how to implement it:

<input  type="file" id="file" multiple 
    onchange = "alert(this.value); myFunction(); this.value = null;" />

Try it

Similarly, using jQuery...

$(document).ready(function () {
    $('#file').change(function () {
      alert (this.files[0].name);
      this.value = null;
    });
});

Try it

Do this with other events like the onclick() event or click event (in jQuery).

Conclusion

Resetting the file input value to null is a quick fix that ensures consistent behavior across browsers. It keeps your file upload logic reliable, even when users reselect the same file.

← PreviousNext →

File Input Bug in Resize Multiple Images Tool - Resolved!

Conclusion