Issue: OnChange event does not fire for Input if it is same file is selected twice

Question

I need to listen to file select event whenever user selects a file (on repeated clicks of the browse button).

However, if the user selects the same file as previously, the change event does not fire. Is there some other event I could listen to, or other solution to this problem?

(function() {
  $('.file_upload').on('change', function() {
    console.log('Changed!');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="btn btn-primary">File #1 <input name="file1" id="file1" class="file_upload a1" type="file" /></label>

Input file field is only a single file at a time. If you want to allow multiple files, you might want to add multiple to your input tag. — imvain2, Feb 11 '19 at 17:50

Isaac Vidrine · Accepted Answer · 2019-02-11T17:54:18.810

1

After you have done your logic for your file upload or whatever you are doing, you can reset the value property.

See this post

var $f1 = $("#container .f1");

function FChange() {
    alert("f1 changed");
    
    $(this).prop("value", "");
}

$f1.change(FChange);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <input type="file" class="f1">
</div>

Another thing mentioned was that you can actually remove and re add the file input element on change.

edited Feb 11 '19 at 17:54

answered Feb 11 '19 at 17:40

Isaac Vidrine

1,568
1
8
20

You can't set the value of a file input. – epascarello Feb 11 '19 at 17:43
@epascarello you can, see the snippet. – Isaac Vidrine Feb 11 '19 at 17:58
@epascarello: I didn't think so either, but it worked. Perhaps you just can't set the value of file input to an actual file, but looks you can set it to nothing = "". Or perhaps you can't set the value in older browsers. – dar25 Feb 11 '19 at 18:28
@dar25 it appears it does not work in legacy browsers https://stackoverflow.com/questions/1696877/how-to-set-a-value-to-a-file-input-in-html – Isaac Vidrine Feb 11 '19 at 20:07

Issue: OnChange event does not fire for Input if it is same file is selected twice

1 Answers1