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?

Community · Accepted Answer · 2017-05-23 11:59:06Z

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, 2017 at 11:59

CommunityBot

11 silver badge

answered Dec 23, 2015 at 17:13

user663031

Sign up to request clarification or add additional context in comments.

1 Comment

drzaus Over a year ago

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)

Lionel Ritchie the Manatee · Accepted Answer · 2015-12-23 16:55:38Z

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, 2015 at 16:55

Lionel Ritchie the Manatee

5412 silver badges7 bronze badges

5 Comments

user663031 Over a year ago

you could always reset the file input. How, is the question?

Lionel Ritchie the Manatee Over a year ago

see the code in my comment. It's the piece of code that says // Reset your input next to it.

drzaus Over a year ago

added context -- as you guessed I'm doing something with the file contents (via FileReader)

user663031 Over a year ago

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).

Lionel Ritchie the Manatee Over a year ago

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

leguano · Accepted Answer · 2015-12-23 17:09:26Z

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, 2015 at 17:09

leguano

1711 silver badge6 bronze badges

2 Comments

drzaus Over a year ago

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

leguano Over a year ago

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.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related