Add upload progress bar

This commit is contained in:
Simon Walton 2018-11-15 09:47:43 -08:00
parent f5e14565b8
commit cd00abd216

View file

@ -10,10 +10,20 @@ $(document).ready(function(){
function progressBarHTML(extraClass, label) {
var html = "<div class='progress'>";
html += "<div class='" + extraClass + " progress-bar progress-bar-success progress-bar-striped active' role='progressbar' aria-valuemin='0' aria-valuemax='100'>";
html += label + "<span class='sr-only'></span></div></div>";
html += label + "<span class='ongoing-msg'></span></div></div>";
return html;
}
function showUploadProgress(title) {
swal({
title: title,
text: progressBarHTML('upload-content-progress', 'Upload'),
html: true,
showConfirmButton: false,
allowEscapeKey: false
});
}
function uploadNextChunk(file, offset) {
if (offset == undefined) {
offset = 0;
@ -26,7 +36,7 @@ $(document).ready(function(){
var isFinal = Boolean(fileSize - offset <= CHUNK_SIZE);
var nextChunkSize = Math.min(fileSize - offset, CHUNK_SIZE);
var chunk = file.slice(offset, offset + CHUNK_SIZE, file.type);
var chunk = file.slice(offset, offset + nextChunkSize, file.type);
var chunkFormData = new FormData();
var formItemName = isFinal ? 'restore-file-chunk-final' : 'restore-file-chunk';
@ -50,6 +60,8 @@ $(document).ready(function(){
);
});
updateProgressBars($('.upload-content-progress'), Math.round((offset + nextChunkSize) * 100 / fileSize));
if (!isFinal) {
ajaxObject.done(function (data, textStatus, jqXHR)
{ uploadNextChunk(file, offset + CHUNK_SIZE); });
@ -102,10 +114,10 @@ $(document).ready(function(){
"Restore content",
function() {
var files = $('#' + RESTORE_SETTINGS_FILE_ID).prop('files');
var file = files[0];
showSpinnerAlert("Uploading content to restore");
uploadNextChunk(files[0]);
showUploadProgress("Uploading " + file.name);
uploadNextChunk(file);
}
);
});
@ -196,6 +208,11 @@ $(document).ready(function(){
checkBackupStatus();
});
function updateProgressBars($progressBar, value) {
$progressBar.attr('aria-valuenow', value).attr('style', 'width: ' + value + '%');
$progressBar.find('.ongoing-msg').html(" " + value + "% Complete");
}
function reloadBackupInformation() {
// make a GET request to get backup information to populate the table
$.ajax({
@ -232,11 +249,6 @@ $(document).ready(function(){
+ "<li><a class='" + BACKUP_DELETE_LINK_CLASS + "' href='#' target='_blank'>Delete</a></li></ul></div></td>";
}
function updateProgressBars($progressBar, value) {
$progressBar.attr('aria-valuenow', value).attr('style', 'width: ' + value + '%');
$progressBar.find('.sr-only').html(value + "% Complete");
}
// before we add any new rows and update existing ones
// remove our flag for active rows
$('.' + ACTIVE_BACKUP_ROW_CLASS).removeClass(ACTIVE_BACKUP_ROW_CLASS);