jQuery onChange doesn't trigger when you clear input[type=file] value

Question

Need to do an operation when the file is changed or when we clear the file input.

$('input[type="file"]').change(function (e) {
       console.log('changed')
});

It works when I select/change the file.

It doesn't trigger change event when I clear the input[type=file].

$('input[type="file"]').val('');

Does clearing the value triggers the change event? or what would be a better way to this?

If you are programmatically clearing the value like the above example, you can just call $('input[type="file"]').trigger("change"); right after that value is cleared. — Asyranok, Mar 19 '19 at 15:28
@Asyranok Yes, this can be done. So clearing the input doesn't trigger change event? Need to explicitly trigger the 'change' event. right? — ejaz, Mar 19 '19 at 15:34

score 5 · Accepted Answer · answered Mar 19 '19 at 15:29

5

You can force to trigger the event change

 $('input[type="file"]').val('').trigger('change');

answered Mar 19 '19 at 15:29

R3tep

@ejaz Does this one liner works for you? – Bhojendra Rauniyar Mar 19 '19 at 15:46
@BhojendraRauniyar yes it works. I figured it out that it `val('')` doesn't trigger 'change' event. Have to trigger the event by `$('input[type="file"]').val('').trigger('change');` or `$('input[type="file"]').val('').change();` – ejaz Mar 19 '19 at 16:06
@ejaz Ah, thanks for letting it me know. I was having something else in mind. – Bhojendra Rauniyar Mar 19 '19 at 16:08

1 Answers1