title: How to know when ajax file upload has fully completed, before lengthy server-side processing of the file
body: <p>I am uploading a file using JQuery, ajax and FormData, with PHP on the server end. The file upload works, and I have a progress bar that successfully updates during the upload. However, when the files are small or the network connection is fast, the last progress event received might not be at 100% (it might be less than 90%). This is a problem since I want to change the progress bar text after the file transfer to indicate that server-side processing is taking place (converting PDF to images, which may take some time).</p>
  
  <p>Is there any way I can know when the file transfer is complete, so that I can make sure the progress bar is not stuck at an anonymous/impatience-inducing/oh-no-it-stopped-working-better-refresh-and-try-again 89% for the entire duration of the server-side processing?</p>
  
  <p>My upload code in case it's relevant (I've removed <code>beforeSend</code>, <code>success</code> and <code>complete</code> for brevity):</p>
  
  <pre><code>var formData = new FormData($('#form-file-upload')[0]);
  $.ajax({
    url: 'ajax/file-upload.php',
    type: 'POST',
    dataType : "json",
    xhr: function() {
      var myXhr = $.ajaxSettings.xhr();
      if(myXhr.upload){
        myXhr.upload.addEventListener('progress', function(e){
          if(e.lengthComputable){
            var percent = (100*e.loaded/e.total).toFixed(0);
            $('#form-file-upload-progress-percent').html(percent + ' %');
            $('#form-file-upload-progress-bar').attr('aria-valuenow', percent).css({width: percent + '%'});
          }
        }, false);
      }
      return myXhr;
    },
    beforeSend: // code executed before submission
    success: // code executed after successful server-side processing
    complete: // code executed after server-side processing
    data: formData,
    cache: false,
    contentType: false,
    processData: false
  });
  </code></pre>