title: Alternatives to XMLHttpRequest when fetching upload progress
body: <p>I've been noodling with an XMLHttpRequest to update users on upload progress for large files in a web form:</p>
  
  <pre><code>function progressHandler(event) {
      var percent = Math.round((event.loaded / event.total) * 100);
      $('#loader').text( percent + '%' );
  }
  
  $("#Submit").click(function () {
      var file = document.getElementById('fileupload').files[0];
      var formData = new FormData(document.getElementById("new-job-form"));
  
      ajax = new XMLHttpRequest();
      ajax.upload.addEventListener("progress", progressHandler, false);
  
      ajax.onreadystatechange = function () {
          if (ajax.readyState == 4 &amp;&amp; ajax.status == 200) {
              // we'll come back to this
          }
      }
  
      ajax.open("POST", "@Url.Action("NewJob", "Home")");
      ajax.send(formData);
  });
  </code></pre>
  
  <p>And this works fine, up until the point the load completes.</p>
  
  <p>My web application backend is written in .Net MVC and originally used this after the file upload was complete:</p>
  
  <pre><code>return RedirectToAction("FieldMapping", new { jobId = job.JobId });
  </code></pre>
  
  <p>This no longer works, because I've made the call asynchronous by invoking <code>XMLHttpRequest</code>. </p>
  
  <p>The alternative is to return Json containing the target Url and redirect to that. This is a pain, and I'm having trouble getting it work properly. There are a few questions about this already on SO and the consensus is: don't do this. The whole point of Ajax is deal with partial responses, not whole-page redirects.</p>
  
  <p>Which I understand, but I don't know of another way I can monitor the progress of a file upload and send it back to the user without using <code>XMLHttpRequest</code>. Is there another way to approach this, so I can just <code>RedirectToAction</code> after the request is complete?</p>