How to detect input type=file "change" for the same file?

I want to fire an event when the user select a file. Doing so with .change event it works if the user changes the file every time.

But I want to fire the event if the user select the same file again.

1. User select file A.jpg (event fires)
2. User select file B.jpg (event fires)
3. User select file B.jpg (event doesn't fire, I want it to fire)

How can I do it?

Solution 1:

You can trick it. Remove the file element and add it in the same place on change event. It will erase the file path making it changeable every time.

Example on jsFiddle.

Or you can simply use .prop("value", ""), see this example on jsFiddle.

• jQuery 1.6+ prop
• Earlier versions attr

Solution 2:

You can simply set to null the file path every time user clicks on the control. Now, even if the user selects the same file, the onchange event will be triggered.

<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />

Solution 3:

If you have tried .attr("value", "") and didn't work, don't panic (like I did)

just do .val("") instead, and will work fine