Detect a file select on the same file as previously selected

Question

I have simple web app which lets a user select a file, and uploads it for them. If the upload fails, it tries again, 2 more times, to upload it.

I start the upload process when the change event happens on the input. I want this to happen every time they select a file, even if they select the same file twice in a row. (I have a good reason, not relevant here)

However, if they select the same file again, the change event does not happen. It only happens when the file input was previously empty, or pointed at a different file.

Is there a "a file has been selected" event which I can bind a function to, which doesn't necessitate a change?

Plain .js is fine, jQuery is already loaded in the project.

I'm looking for something like a "file selected" but there's nothing I can see.

reportEvent = function() {
  $('.form-box').append(
    '<p>The input change event fired for' + $('#fi').val() + '</p>'
  );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-box">
  <input type="file" id="fi" onchange="reportEvent()">
</div>

duplicate of http://stackoverflow.com/questions/12030686/html-input-file-selection-event-not-firing-upon-selecting-the-same-file — llamerr, Mar 24 '16 at 18:30

score 1 · Accepted Answer · answered Mar 24 '16 at 19:03

1

This might help:

reportEvent = function() {
  $('.form-box').append(
    '<p>The input change event fired for' + $('#fi').val() + '</p>'
  );
   
  // Do some work here...

  $('#fi').val(''); // Reset file input to the initial state, so you can upload the same file again
}

answered Mar 24 '16 at 19:03

David Gasparian

26
4

So simple! I had myself convinced that the File api would stop me from doing this. I was wrong, thank heavens. – daveyfaherty Mar 30 '16 at 15:34

Detect a file select on the same file as previously selected

1 Answers1