Experimenting with File-Upload

Blueimp

by Ea Bangalore

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 uploadFileList = [];
    $('#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(data.files[0].name);
           if(uploadFileList.length >= 2)
             $('#skipFilename').text(uploadFileList[1]);
             
             data.submit();
        },
        done: function (e, data) {
            /* data.context.text('Upload finished.') */;
        },
        fail: function (e, data) {
        }
    }).on('fileuploadchunksend', function (e, data) {
        var filename = uploadFileList[1]; //abort 2nd file
        var currentFilename = data.files[0].name;
        if(currentFilename == filename){
              data.abort();
         }
    }).on('fileuploadchunkdone', function (e, data) {
    	console.info('testing', data);  
    }).on('fileuploadstop', function (e) {
         uploadFileList.length = 0;
    })
});