jQuery ajax file upload not picking up updated file

Question

Trying to upload a CSV file using HTML form and jQuery. Below are the steps to illustrate the issue

1.) Upload file for the first time, everything goes fine. 2.) Make changes to file and save it (say using MS Excel in this case) 3.) Select the file again and upload 4.) The old file is uploaded, changes made at step2 are not reflecting. 5.) Save-as file with a different name 6.) Upload the file, everything goes fine

HTML

  <form method="post" enctype="multipart/form-data" id="csvform">                                       
    <div class="mb-3">
      <label class="form-label" for="csvfile">CSV File</label>
      <input type="file" class="form-control" id="csvfile" placeholder="Select CSV file">     
    </div>
    <div class="form-check form-switch mB-20">
      <label class="form-check-label" for="update_existing">Update if the record exists</label>
      <input class="form-check-input" type="checkbox" id="update_existing" name="update_existing">                            
    </div>                             
    <button type="submit" class="btn btn-primary btn-color">Upload</button> 
</form>

JS

function csv_file_handler() {    
  
  var fd = new FormData(document.querySelector('#csvform'));
  
  $.ajax({
    type: 'POST',
    url: '/uploadcsv/',
    data: fd,
    cache: false,
    processData: false,
    contentType: false,           
    success: function (response) {  
      $("#upload_status").html(response)      
      $('#csvform').get(0).reset()      
    },
    error: function (jqXhr, textStatus, errorMessage) {               
        console.log(jqXhr.responseText)
        console.log(errorMessage)
    }
  })
  return false;

}

$(document).ready(function() {  
    $("#csvform").on('submit', csv_file_handler)
});

Page reload doesn't help, tried form reset after each upload etc but no luck. The only thing that works seem to be renaming the file and uploading it. The issue is seen in both chrome and edge browsers.

It appears like browser is caching the file and changes are not reflected. Or am I doing a fundamental error ?

Answer 1

The issue is occurs due to browser cache. So even if you update the file on the server, the browser is still using the old version.

As per your ajax code you have already disabled cache but you may try with adding timestamp parameter to request URI.

Try below code

function csv_file_handler() {    
  var timestamp = new Date().getTime(); // Get the current timestamp
  var fd = new FormData(document.querySelector('#csvform'));
  
  $.ajax({
    type: 'POST',
    url: '/uploadcsv/?timestamp=' + timestamp,
    data: fd,
    cache: false,
    processData: false,
    contentType: false,           
    success: function (response) {  
      $("#upload_status").html(response)      
      $('#csvform').get(0).reset()      
    },
    error: function (jqXhr, textStatus, errorMessage) {               
        console.log(jqXhr.responseText)
        console.log(errorMessage)
    }
  })
  return false;
}

If adding a timestamp parameter did not solve the issue, you can try the following:

1. Add the autocomplete="off" attribute to your file input element.
2. Check if the server-side code that handles the file upload is correctly overwriting the existing file. It's possible that the server-side code issue.
3. If none of the above solutions work, you need to consider using a different file upload library.