Trigger JavaScript change event when value not different (file input)

Question

"Form" with client-side only interactivity:

<input type="file" id="file" />

I'd like to avoid making another button just to trigger functionality, but:

function handleInput(e) {
    console.log('change occurred', e);

    // read the input with FileReader HTML5 and do stuff
}
var $el = document.getElementById('file');
$el.addEventListener('change', handleInput, false);

When I first choose a file, the event triggers. If I choose the same file again, it does not. Is there an alternative event I should use?

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

Surround the input element in a form and then do form.reset().

For more information, see How to set a value to a file input in HTML? and How can I clear an HTML file input with JavaScript?.

edited May 23 '17 at 11:59

Community

1
1

answered Dec 23 '15 at 17:13

Sorry if I didn't give enough context. It's already in a form, but there are other inputs involved so I can't clear it; +1 for the link to clear file input (since that's what I needed) – drzaus Dec 23 '15 at 20:55

score 0 · Accepted Answer · answered Dec 23 '15 at 16:55

0

The 'change' event listener will only trigger when the value of the input changes, so if the same file is selected, no change would be triggered and the event will not fire.

If you could provide a bit more context about what you're doing there may be other options. For instance, if you're creating an AJAX uploader and want to do something with the information in the file input, then you're done with it, you could always reset the file input with your listener function. That way the next selection would trigger a change again.

For instance:

<script type="text/javascript">
    function handleInput(e) {
        console.log('change occurred', e);
        // Do Something with your input value
        document.getElementById('#file').value = ''; // Reset your input
    }
    var $el = document.getElementById('#file');
    $el.addEventListener('change', handleInput, false);
</script>

answered Dec 23 '15 at 16:55

Lionel Ritchie the Manatee

541
2
7

*you could always reset the file input*. How, is the question? – Dec 23 '15 at 17:13
see the code in my comment. It's the piece of code that says // Reset your input next to it. – Lionel Ritchie the Manatee Dec 23 '15 at 17:57
added context -- as you guessed I'm doing something with the file contents (via `FileReader`) – drzaus Dec 23 '15 at 20:45
I am not convinced that `elt.value = ''` will work reliably. I believe that in the case of a file input element this attribute is read-only (at least in some browsers). – Dec 24 '15 at 05:12
That may present some issues - you could also remove the element dynamically and recreate it using `.remove()` and something like `.append()` if that becomes an issue – Lionel Ritchie the Manatee Dec 28 '15 at 15:18

score 0 · Answer 3 · answered Dec 23 '15 at 17:09

0

your code works for me, if i change "#file" into "file" (it's an id not a selector):

function handleInput(e) {
    console.log('change occurred', e);
}
var $el = document.getElementById('file');
$el.addEventListener('change', handleInput, false);

(Using FF 38ESR on Win7)

answered Dec 23 '15 at 17:09

leguano

171
1
6

yeah the `#file` selector was a copy/paste typo, but you're saying you can click the input and choose the same file twice, and it fires twice? May be different for me because I'm in Chrome – drzaus Dec 23 '15 at 20:42
Yes, it fires twice when i choose the same file twice. but in crome and ie11 i become the same result like you. it fires only once. – leguano Dec 24 '15 at 09:31

Trigger JavaScript change event when value not different (file input)

3 Answers3