how to skip file from current upload queue at run time with blueimp fileupload

Question

Hi i have problem in skipping file from current upload queue.

my current scenario

1. i want to abort 2nd file when it starts uploading , so that it is not sent after abort

2. i want to skip 3rd file from upload queue - it is not a abort because current file only we can abort

here is how i'm doing it

    var uploadFileList = [];

   add: function (e, data) {
             uploadFileList.push(data.files[0].name);
             data.submit();
     },
    
    .on('fileuploadchunksend', function (e, data) {
            /** Abort code starts here **/
            var filename = uploadFileList[1]; //abort 2nd file
            var currentFilename = data.files[0].name;
            if(currentFilename == filename){
                  data.abort();
             }
            /** Abort code Ends here **/

            //skip code
             data.originalFiles.splice(3,1);
        })

Note: i don't want any ui for abort or skip

here is full code (not skipping): http://jsfiddle.net/eabangalore/dm9j5uzn/84/

For current upload it will be abort and for queue it will be skip.

Please help me thanks in advance!!

Answer 1

Try like this:

$(function() {
  var skip = [2]; //file indexes to skip
  var abort = [1]; //file indexes to abort
  var uploadFileList = [];
  var indexAdd = 0;
  var countSubmit = 0;
  var countAlways = 0;
  var indexUpload = null;

  $('#fileupload').fileupload({
    url: '/echo/json/',
    maxChunkSize: 1024 * 1024,
    maxRetries: 3,
    dataType: 'json',
    multipart: false,
    sequentialUploads: true,
    progress: function(e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10),
        meter = $('.progress .meter'),
        percent = progress + '%';
      meter.css('width', percent).text(percent);
      $('#currentFileName').text(data.files[0].name);
    },
    add: function(e, data) {
      uploadFileList.push({ name: data.files[0].name, state: null, jqXHR: null });

      //Skip files in the skip array - i.e. don't start the file upload
      if (skip.indexOf(indexAdd)  !== -1) {
        $('#skipFilename').text(uploadFileList[indexAdd].name);
        uploadFileList[indexAdd].state = 'skipped';
        console.log(uploadFileList[indexAdd].name, 'skip');
      } else {
        uploadFileList[indexAdd].jqXHR = data.submit();
        countSubmit++;
      };

      indexAdd++;
    },
    done: function(e, data) {
      /* data.context.text('Upload finished.') */
      ;
    },
    fail: function(e, data) {}
  }).on('fileuploadchunksend', function(e, data) {
    /* $.each(data.files, function (index, file) {
      console.log('fileuploadchunksend file: ' + file.name);
    }); */
    /** Abort code starts here **/
    /* var filename = uploadFileList[1]; //abort 2nd file
    var currentFilename = data.files[0].name;
    if (currentFilename == filename) {
      data.abort();
    } */
    /** Abort code Ends here **/
    console.log(data.files[0].name, 'fileuploadchunksend');
    
    //abort files in the abort array
     for(var i = 0; i < uploadFileList.length; i++) {
      if(uploadFileList[i].name === data.files[0].name) {
        indexUpload = i;
        
        if(abort.indexOf(i) !== -1) {
          setTimeout(abortUpload, 0); //setTimeout seems to solve the issue of the jqXHR.abort() not stopping the upload
        } else {
          uploadFileList[i].state = 'sent';
        };
      };
    };

    //skip code
    data.originalFiles.splice(3, 1);
  }).on('fileuploadchunkdone', function(e, data) {
   /*  console.info('testing', data); */
  }).on('fileuploadstop', function(e) {
    uploadFileList.length = 0;
    }).on('fileuploadsend', function (e, data) {
    console.log(data.files[0].name, 'send');    
    }).on('fileuploaddone', function (e, data) {
    console.log(data.files[0].name, 'done', getStatus(data));
  }).on('fileuploadfail', function (e, data) {
    console.log(data.files[0].name, 'fail', getStatus(data));
  }).on('fileuploadalways', function (e, data) {
    console.log(data.files[0].name, 'always', getStatus(data));
    countAlways++;
    
    if(countAlways === countSubmit) {
        for(var i = 0; i < uploadFileList.length; i++) {
        delete uploadFileList[i].jqXHR;
      };
        console.log('done', uploadFileList);
    };
  });
  
  function getStatus(data) {
    //check if aborted
    for(var i = 0; i < uploadFileList.length; i++) {
      if(uploadFileList[i].name === data.files[0].name && uploadFileList[i].state === 'aborted') {
        return 'abort';
      };
    };
    
    return data.textStatus;
  };
  
  function abortUpload() {
    if(uploadFileList[indexUpload].jqXHR !== null) {
      console.log(uploadFileList[indexUpload].name, 'aborting');
      uploadFileList[indexUpload].state = 'aborted';
      uploadFileList[indexUpload].jqXHR.abort();
    };
  };
});

http://jsfiddle.net/0qmLw8pg/

Arrays of which files to skip or abort are initially set.

To skip a file (i.e. don't initiate upload), do not run data.submit() in the add callback for that file.

Abort works with jQuery Ajax request objects, e.g. returned from the send callback. send cannot be used in this case because it sends all the files, so you would not be able to skip any. It is possible to call a function which runs abort for a separate Ajax object returned for each file in the add callback. Another way to abort is to return false in the fileuploadsend callback (just like jQuery Ajax beforeSend).

Logs to the console have been included so you can see it working. This code works assuming the file names are unique.

EDIT: Updated to work with Ajax objects and abort upload at any point after initial fileuploadsend e.g. (fileuploadchunksend).