My redirection is failing after I upload my file

Question

Here's the block of code that I'm struggling with.

This jQuery function uploads a file with ajax, but after the file is uploaded, I fails to complete the redirect, and just returns to the file upload Form.

 jQuery(document).ready(function($) {

  $("#uploadform").submit(function(e){
         e.preventDefault();

         $('input:submit').attr("disabled", true);
         $("#addanother").attr("disabled", "disabled");
         $("#uploadProgress").show();

         var formData = new FormData(this); // Create FormData object from the form

         var loadLoader = function() {
             $.get("index.php?action=u&step=99", function(data) {
                var uploaded = parseInt(data);
                console.log("Loaded:", uploaded);
                updateProgressBar(uploaded);
             });
         }; //End of loadLoder Function

         var updateProgressBar = function (uploaded) {
             console.log("Uploaded: " + uploaded);
             $(".badge").text(uploaded +"%");
             $(".bar").each(function() {
                var $that = $(this);
                var percent = $that.data('uploaded');
                $that.progressbar({
                   value: percent
                });
              }); //end of each(function

             if (uploaded == 100) {
                $(".progress, .badge, #uploadProgress, #cancel_upload").hide();
                $("#uploadProgress").text("Upload complete 100%").show();
                setTimeout(function() {
                   window.location.href = "index.php?action=u&step=2";
                }, 1000);
                clearInterval(loader)
             }
         };

         $.ajax({
          url: 'index.php?action=u&step=99&type=ajax',
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          xhr:function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {
              if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
                console.log ('Upload progress:', percent + '%');
                $(".progress .bar").css('width', percent + "%");
              }
            }, false);
            return xhr;
          },
          success: function (data) {
            console.log('Upload Complete:', data);
            $("#uploadProgress").hide();
            setTimeout(function() {
               window.location.href = "index.php?action=u&step=2";
            }, 1000);
            clearInterval(loader);

          },
          error: function (xhr, status, error) {
            console.error('Upload error:', xhr, status, error);
          }
        });//end of getProgressBar

        var loader = setInterval(loadLoader, 1000);

     });
  });

This is the basic's of the form I'm working with.

<div id="upload">
  <form
    method="post"
    enctype="multipart/form-data"
    action="{$script}"
    name="uploadform"
    id="uploadform"
  >

<!--Some code with the rest of the form to upload the file-->

    <div id="uploadbutton" style="visibility: hidden">
      <br />
      <input
        type="submit"
        name="upload"
        class="submit"
        value="{tr}Proceed with upload{/tr}"
      />&nbsp;OR&nbsp;<input
        type="button"
        class="submit"
        name="addanother"
        id="addanother"
        value="{tr}Add another file{/tr}"
        onclick="addrow('myTable');"
      />
    </div>
    <br /><br />
    <div id="uploadProgress" name="uploadProgress" style="display: none">
      {tr}Please wait while upload is in progress {/tr}
      <div class="progress">
        <div class="bar" style="width: 0%"></div>
      </div>
      <span class="badge" style="display: none">0%</span>
    </div>
    <br />
    <input
      type="button"
      name="cancel_upload"
      id="cancel_upload"
      class="submit"
      value="{tr}Cancel upload{/tr}"
      style="display: none"
      onclick="parent.location='index.php?action=u';"
    />
  </form>
</div>

I have tried rewriting the progress bar logic, but for some reason when I try to redirect to index.php?action=u&step=2 I get redirected to the upload form at index.php

Is there someting I am missing?

HERE's WHAT I HAVE TRIED:

I tried separating the handling of the upload function after the ajax call, but I'm able to get the redirection but the progress bar isn't working.

  jQuery(document).ready(function($) {

  $("#uploadform").submit(function(e){
         $('input:submit').attr("disabled", true);
         $("#addanother").attr("disabled", "disabled");

         var formData = new FormData(this); // Create FormData object from the form

         $.ajax({
          url: 'index.php?action=u&step=99&type=ajax',
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          xhr:function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {
              if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
                console.log ('Upload progress:', percent + '%');
                $(".progress .bar").css('width', percent + "%");
              }
            }, false);
            return xhr;
          },
          success: function (data) {
            console.log('Upload Complete:', data);
          },
          error: function (xhr, status, error) {
            console.error('Upload error:', xhr, status, error);
          },

  function(data) {
      var uploaded = parseInt(data);
      console.log("Uploaded:", uploaded);
      $("#uploadProgress").progressbar({
        value: uploaded
      });

      if (uploaded == 100) {
          $(".progress, .badge, #uploadProgress, #cancel_upload").hide();
          $("#uploadProgress").text("Upload complete 100%!").show();
          setTimeout(function () {
              window.location.href = "index.php?action=u&step=2";
          }, 1000);
          clearInterval(loadLoader);
      } else if (uploaded < 100) {
          $(".progress, .badge, #uploadProgress, #cancel_upload").show();
          $(".badge").text(uploaded + "%");
          console.log("Progress updated:", uploaded + "%");
          $(".bar").css('width', uploaded + "%");
      }

      if (uploaded < 100)
          var loader = setInterval(loadLoader, 1000);
  }
  });

  var loadLoader = function () {
      $.get("index.php?action=u&step=99&type=ajax", function (data) {
          var uploaded = parseInt(data);
          console.log("Loaded:", uploaded);
          $("#uploadProgress").progressbar({
            value: uploaded
          });

          if (uploaded == 100) {
              $(".progress, .badge, #uploadProgress, #cancel_upload").hide();
              $("#uploadProgress").text("Upload complete 100%!").show();
              setTimeout(function () {
                  window.location.href = "index.php?action=u&step=2";
              }, 1000);
          } else if (uploaded < 100) {
              $(".progress, .badge, #uploadProgress, #cancel_upload").show();
              $(".badge").text(uploaded + "%");
              console.log("Progress updated:", uploaded + "%");
              $(".bar").css('width', uploaded + "%");
          }
      });
  };
     });//end of getProgressBar
  });

I get a readyState of 0 in my error messages and I'm not sure if I'm handling something imporerly, or its an easy fix I'm messing up.

Any help would be appreciated.