<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1>File Upload Widget</h1> <p>For use with javascript file upload library such as <strong>resumable.js</strong>.<br> Change progress display by modifying <strong>linear-gradient</strong> in background properties.</p> <br> <div class="row"> <div class="col-md-8"> <div class="form-group"> <label class="form-label">File Upload</label> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default btn-browse">Browse</button> </span> <input type="text" value="" class="form-control file-upload"> <span class="input-group-btn"> <button onclick="r.upload(); return(false);" class="btn btn-default btn-upload" disabled> <i class="glyphicon glyphicon-upload"></i> Upload </button> <button onclick="r.upload(); return(false);" class="btn btn-default btn-resume hidden"> <i class="glyphicon glyphicon-play"></i> </button> <button onclick="r.pause(); return(false);" class="btn btn-default btn-pause hidden"> <i class="glyphicon glyphicon-pause"></i> </button> <button onclick="r.cancel(); return(false);" class="btn btn-danger btn-cancel hidden"> <i class="glyphicon glyphicon glyphicon-remove"></i> </button> </span> </div> </div> </div> </div> <hr> <h2>Not usable, only for viewing experience</h2> <p>use code above for actual widget.</p> <div class="row"> <div class="col-md-8"> <div class="form-group"> <label class="form-label">Upload available</label> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default">Browse</button> </span> <input type="text" value="filename.mp4" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default"> <i class="glyphicon glyphicon-upload"></i> Upload </button> </span> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="form-group"> <label class="form-label">Upload in progress</label> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" disabled>Browse</button> </span> <input type="text" value="filename.mp4 (65%)" class="form-control file-upload-progress"> <span class="input-group-btn"> <button class="btn btn-default"> <i class="glyphicon glyphicon-pause"></i> </button> <button class="btn btn-danger"> <i class="glyphicon glyphicon glyphicon-remove"></i> </button> </span> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="form-group"> <label class="form-label">Upload paused</label> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" disabled>Browse</button> </span> <input type="text" value="filename.mp4 (75%)" class="form-control file-upload-pause"> <span class="input-group-btn"> <button class="btn btn-default"> <i class="glyphicon glyphicon-play"></i> </button> <button class="btn btn-danger"> <i class="glyphicon glyphicon glyphicon-remove"></i> </button> </span> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="form-group"> <label class="form-label">Upload completed</label> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" disabled>Browse</button> </span> <input type="text" value="filename.mp4 (completed)" class="form-control file-upload-complete"> <span class="input-group-btn"> <button class="btn btn-default" disabled> <i class="glyphicon glyphicon-ok"></i> Success </button> </span> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="form-group"> <label class="form-label">Upload canceled</label> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default">Browse</button> </span> <input type="text" value="filename.mp4 (canceled)" class="form-control file-upload-cancel"> <span class="input-group-btn"> <button class="btn btn-default" disabled> <i class="glyphicon glyphicon-remove"></i> Canceled </button> </span> </div> </div> </div> </div> </div>

.file-upload-progress { background: linear-gradient(90deg, #5cb85c 65%, #f5f5f5 65%); } .file-upload-pause { background: linear-gradient(90deg, #f0ad4e 75%, #f5f5f5 75%); } .file-upload-complete { background: linear-gradient(90deg, #5cb85c 100%, #f5f5f5 100%); } .file-upload-cancel { background: #d9534f; color: #fff; }

var r = new Resumable({ target: '/upload', chunkSize: 1*1024*1024, // 1 Mb chunk simultaneousUploads: 4, testChunks: true, throttleProgressCallbacks: 1, maxFiles: 1, fileType: ['mp4'], maxFileSize: 5*1024*1024*1024 // 5 Gb file size limit }); // Resumable.js isn't supported, fall back on a different method if(!r.support) { $('.resumable-error').show(); } else { // Show a place for dropping/selecting files r.assignBrowse($('.btn-browse')[0]); var percentage; var filename; // Handle file add event r.on('fileAdded', function(file){ $('.file-upload').val(file.fileName); $('.btn-upload').html('<i class="glyphicon glyphicon-upload"></i> Upload').prop('disabled', false); $('.file-upload').css('background', '#f5f5f5').css('color', '#555555'); filename = file.fileName; }); r.on('pause', function(){ $('.btn-resume').removeClass('hidden'); $('.btn-pause').addClass('hidden'); percentage = Math.floor(r.progress()*100) + '%'; $('.file-upload').css('background', 'linear-gradient(90deg, #f0ad4e '+percentage+', #f5f5f5 '+percentage+')'); }); r.on('complete', function(){ $('.btn-resume, .btn-pause, .btn-cancel').addClass('hidden'); $('.btn-upload').removeClass('hidden').html('<i class="glyphicon glyphicon-ok"></i> Success').prop('disabled', true); }); r.on('fileSuccess', function(file,message){ $('.file-upload').val(file.fileName + ' (completed)'); }); r.on('fileError', function(file, message){ $('.file-upload').val(file.fileName + ' (error: '+message+')'); }); r.on('fileProgress', function(file){ percentage = Math.floor(r.progress()*100) + '%'; $('.file-upload').val(file.fileName + ' ('+percentage+')'); $('.file-upload').css('background', 'linear-gradient(90deg, #5cb85c '+percentage+', #f5f5f5 '+percentage+')'); }); r.on('cancel', function(){ $('.btn-resume, .btn-pause, .btn-cancel, .btn-upload').addClass('hidden'); $('.btn-upload').removeClass('hidden').html('<i class="glyphicon glyphicon-remove"></i> Canceled').prop('disabled', true); $('.btn-browse').prop('disabled', false); $('.file-upload').val(filename + ' (canceled)'); $('.file-upload').css('background', '#d9534f').css('color', '#ffffff'); }); r.on('uploadStart', function(){ $('.btn-browse').prop('disabled', true); $('.btn-resume, .btn-upload').addClass('hidden'); $('.btn-pause, .btn-cancel').removeClass('hidden'); }); } $(window).bind('beforeunload', function() { if(r.isUploading() || r.isComplete()) { return 'video upload in progress, please wait!'; } });