Question

Code below works well on Firefox – displays progress bar which progresses on every file being uploaded, meanwhile in Chrome, it only displays progress bar at the end of transaction, also when I click “submit” button it freezes up until function completes.

var max = files.length + 1;
var progress_step = 0;
$.post(form.action, $(form).serialize(), function(response){
  var data = jQuery.parseJSON(response);
  if ("errors" in data){
    //...;
  }
  else if ("work_id" in data){
    var work_id = data.work_id;
    //initial increase of progress once Work was created
    progress_step = progress_step + 1;
    progress(progress_step, max);

    $.each(files, function(index, obj){
      uploadFile(work_id, obj);
      progress_step = progress_step + 1;
      progress(progress_step, max);
    });
  }
});

…

function uploadFile (w_id, obj) {    
  var base64_start = obj.src.indexOf(',') + 1;
  $.ajax({
    type: 'POST',
    url: '/works/upload_image',
    data: {work_id: w_id, pic: obj.src.substr(base64_start), pic_type: obj.file.type},
    processData: true,
    timeout: 60000,
    async: false,
    dataType: 'text'
  }); 
}

Answer 1

If you don’t want it to freeze, change async: false to async: true. Since this will make an asynchronous request, it might break the functionality of your progress bar, because it will move on to the next line of code before the request has completed. To fix this, use

success: function() { /*code in here*/ }

to put the code you want to activate when the request is finished.