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>

   <div class="thumbnail-display">
           <video>
              <source>
           </video>
        </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) {
             data.submit();
        },
        done: function (e, data) {
            /* data.context.text('Upload finished.') */;
        },
        fail: function (e, data) {
        }
    }).bind('fileuploadsend', function (e, data) {
           var video = $(".thumbnail-display video");
           var file = data.files[0];
         // Set video source
          video.find("source").attr("src", URL.createObjectURL(file));
          // Load the video
          video.get(0).load(); 
     })
});