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

Question

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

Solution 4

Use onClick event to clear value of target input, each time user clicks on field. This ensures that the onChange event will be triggered for the same file as well. Worked for me :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

Using TypeScript

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

Solution 5

Here's the React-y way solution i've found that worked for me:

onClick={event => event.target.value = null}

View more solutions

Comments

[BrunoLM]

It seems you are just repeating his words and .click() is not "fire on re-select".

[Nick Craver]

@BrunoLM - No, it's not...but I think you read over the portion where I say you can't do this, the click is as close as it gets.

[BrunoLM]

@Pekka: Not exactly. But he can just adapt it. Let's say he needs to post the file. After the post he can call a js function that will remove and add the new file selector. It is doable.

[Jacek Pietal]

i guess you meant something like function() { this.value = null; return false; }

[fadomire]

be aware that when you use .attr("value", "") or .val("") (like suggested by @wagner-leonardi below) internet explorer will fire the change event while chrome don't

[Roger Barreto]

since "value" is a property and not an attribute of input, the recommended jQuery usage would be .prop("value", "")

[iplus26]

onClick fires before onChange, so this method works great for me.

[Jay Dharmendra Solanki]

I needed a solution like this. It is really short and gets the work done. Nice thinking Mariusz Wiazowski.

[songgeb]

Other solution is that changing value when input tag changed. But We do not expect the value be changed after select a file.

[David Dal Busco]

Cool, way better than removing and adding the element in the dom again, thx

[Coisox]

Thank you for this variation answer

[JohnK]

I had to use $(this).val(""); for jQuery 2.2.4.

[anniex]

Thanks! Modifying your answer to @click="(e) => e.target.value = null" got me a Vue solution.

[Alexander Mihailov]

this should be the accepted answer - it requires no javascript at all.

[Syed Mohammad Sannan]

@AlexanderMihailov It still does, when the user actually selects the file.