<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!';
}
});
