Experimenting with File-Upload

Blueimp

HTML

<script src="https://rawgithub.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
<script src="https://rawgithub.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.css">
Upload 3 big files of atleast of 30mb<br />
<input id="fileupload" type="file" name="files[]" multiple>
<div class="progress">
  <div class="meter" style="width: 0%;"></div>
</div>
<div> Skip Filename: <span id="skipFilename" style="color:orange;"></span> | <b>Current Filename: </b> <span id="currentFileName"></span></div>

CSS

.meter {
    color:#fff;
}

.cancel-btns {
    min-height: 50px;
    background: rgba(0, 0, 0, .1);
}

.cancel-btns button {
      margin: 10px;
    background: bisque;
    color: black;
    padding: 12px;
}

JavaScript

$(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;
     ...