jQuery Ajax file upload with progress hangs

Question

I'm using jQuery to upload files. Everything worked fine, until I've added xhr: function () {...} code to track file upload progress. Now it just hangs after Start loading image.... If I remove this block from $.ajax, file upload works.

function showProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('.meter').attr({'width': percentComplete + '%'});
  }
}


console.log('Start loading image...')
$.ajax({
  url: '/uploadimage',
  type: 'POST',
  xhr: function () {
    myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) {
      myXhr.upload.addEventListener('progress', showProgress, false);
    } else {
      console.log("Upload progress is not supported.");
    }
    return myXhr;
  },

  //Ajax events
  beforeSend: function (xhr) {
    // CSRF...
  },
  success: function (data) {
    // do smth
  },

  // Form data
  data: formData,
  cache: false,
  contentType: false,
  processData: false
});

What I'm doing with upload progress wrong? Thanks.

score 0 · Answer 1 · edited May 23 '17 at 12:27

Did you get this resolved? Are you using the upload templates provided or using your own custom markup?

The following works for me:

<script type="text/javascript">
$(document).ready(function () {
    $('#btnContinue').prop('disabled', true);
    $('#fileupload').fileupload({
        url: '@Url.Action("UploadChunk", "Upload")',
        maxChunkSize: 1048576,
    }).addClass('fileupload-processing')
    .bind('fileuploadalways', function (e, data) {
        if ($('#fileIds').val().indexOf(';' + data.result.id + ';') == -1) {
            var pre = $('#fileIds').val() == "" ?  ';' : '';
            var append = $('#fileIds').val() + pre + data.result.id + ';';
            $('#fileIds').val(append);
        }
    })
    .bind('fileuploaddone', function (e, data) {
        $('#btnContinue').prop('disabled', false);
    });

    $.ajax({
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function () {
        $(this).removeClass('fileupload-processing');
    });
});
</script>

I do have an issue with my setup, but you should be able to reference my code for what you are trying to achieve.

Submit Additional Form Data without setting formData

jQuery Ajax file upload with progress hangs

1 Answers1