add more info on what is happening after we are at 100% and minor fixes
This commit is contained in:
parent
500ee4c1bf
commit
3bf2935ee3
@ -43,7 +43,7 @@
|
|||||||
#profile-jot-text.hover {
|
#profile-jot-text.hover {
|
||||||
background-color: aliceblue;
|
background-color: aliceblue;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
box-shadow: inset 0 3px 4px #888;
|
box-shadow: inset 0 0px 7px #5cb85c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jot-attachment {
|
.jot-attachment {
|
||||||
|
@ -50,7 +50,7 @@
|
|||||||
|
|
||||||
.upload-progress-bar {
|
.upload-progress-bar {
|
||||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOM2RFTDwAE2QHxFMHIIwAAAABJRU5ErkJggg==') repeat-y;
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOM2RFTDwAE2QHxFMHIIwAAAABJRU5ErkJggg==') repeat-y;
|
||||||
background-size: 3px;
|
background-size: 0px;
|
||||||
padding: 0px !important;
|
padding: 0px !important;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
}
|
}
|
||||||
|
@ -88,13 +88,13 @@ function UploadFileSelectHandler(e) {
|
|||||||
|
|
||||||
function prepareHtml(f, i) {
|
function prepareHtml(f, i) {
|
||||||
$("#cloud-index tr:nth-child(2)").after(
|
$("#cloud-index tr:nth-child(2)").after(
|
||||||
'<tr class="new-upload">' +
|
'<tr id="new-upload-' + i + '" class="new-upload">' +
|
||||||
'<td><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
|
'<td><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
|
||||||
'<td>' + f.name + '</td>' +
|
'<td>' + f.name + '</td>' +
|
||||||
'<td id="upload-progress-' + i + '"></td><td></td><td></td><td></td><td></td>' +
|
'<td id="upload-progress-' + i + '"></td><td></td><td></td><td></td><td></td>' +
|
||||||
'<td class="hidden-xs">' + formatSizeUnits(f.size) + '</td><td class="hidden-xs"></td>' +
|
'<td class="hidden-xs">' + formatSizeUnits(f.size) + '</td><td class="hidden-xs"></td>' +
|
||||||
'</tr>' +
|
'</tr>' +
|
||||||
'<tr class="new-upload">' +
|
'<tr id="new-upload-progress-bar-' + i + '"class="new-upload">' +
|
||||||
'<td id="upload-progress-bar-' + i + '" colspan="9" class="upload-progress-bar"></td>' +
|
'<td id="upload-progress-bar-' + i + '" colspan="9" class="upload-progress-bar"></td>' +
|
||||||
'</tr>'
|
'</tr>'
|
||||||
);
|
);
|
||||||
@ -134,6 +134,7 @@ function getIconFromType(type) {
|
|||||||
'application/x-rar-compressed': 'fa-file-archive-o',
|
'application/x-rar-compressed': 'fa-file-archive-o',
|
||||||
//Audio
|
//Audio
|
||||||
'audio/mpeg': 'fa-file-audio-o',
|
'audio/mpeg': 'fa-file-audio-o',
|
||||||
|
'audio/mp3': 'fa-file-audio-o', //webkit browsers need that
|
||||||
'audio/wav': 'fa-file-audio-o',
|
'audio/wav': 'fa-file-audio-o',
|
||||||
'application/ogg': 'fa-file-audio-o',
|
'application/ogg': 'fa-file-audio-o',
|
||||||
'audio/ogg': 'fa-file-audio-o',
|
'audio/ogg': 'fa-file-audio-o',
|
||||||
@ -158,27 +159,37 @@ function getIconFromType(type) {
|
|||||||
// upload files
|
// upload files
|
||||||
function UploadFile(file, idx) {
|
function UploadFile(file, idx) {
|
||||||
|
|
||||||
window.filesToUpload = window.filesToUpload + 1;
|
window.filesToUpload = window.filesToUpload + 1
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
|
|
||||||
xhr.withCredentials = true; // Include the SESSION cookie info for authentication
|
xhr.withCredentials = true; // Include the SESSION cookie info for authentication
|
||||||
|
|
||||||
(xhr.upload || xhr).addEventListener('progress', function (e) {
|
(xhr.upload || xhr).addEventListener('progress', function (e) {
|
||||||
|
|
||||||
var done = e.position || e.loaded;
|
var done = e.position || e.loaded;
|
||||||
var total = e.totalSize || e.total;
|
var total = e.totalSize || e.total;
|
||||||
// Dynamically update the percentage complete displayed in the file upload list
|
// Dynamically update the percentage complete displayed in the file upload list
|
||||||
$('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
|
$('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
|
||||||
$('#upload-progress-bar-' + idx).css('background-size', Math.round(done / total * 100) + '%');
|
$('#upload-progress-bar-' + idx).css('background-size', Math.round(done / total * 100) + '%');
|
||||||
|
|
||||||
|
if(done == total) {
|
||||||
|
$('#upload-progress-' + idx).html('Processing...');
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
xhr.addEventListener('load', function (e) {
|
xhr.addEventListener('load', function (e) {
|
||||||
|
//we could possibly turn the filenames to real links here and add the delete and edit buttons to avoid page reload...
|
||||||
|
$('#upload-progress-' + idx).html('Ready!');
|
||||||
|
|
||||||
//console.log('xhr upload complete', e);
|
//console.log('xhr upload complete', e);
|
||||||
window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
|
window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
|
||||||
|
|
||||||
// When all the uploads have completed, refresh the page
|
// When all the uploads have completed, refresh the page
|
||||||
if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
|
if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
|
||||||
|
|
||||||
window.fileUploadsCompleted = window.filesToUpload = 0;
|
window.fileUploadsCompleted = window.filesToUpload = 0;
|
||||||
|
|
||||||
// After uploads complete, refresh browser window to display new files
|
// After uploads complete, refresh browser window to display new files
|
||||||
@ -186,6 +197,11 @@ function UploadFile(file, idx) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
xhr.addEventListener('error', function (e) {
|
||||||
|
$('#upload-progress-' + idx).html('<span style="color: red;">ERROR</span>');
|
||||||
|
});
|
||||||
|
|
||||||
// POST to the entire cloud path
|
// POST to the entire cloud path
|
||||||
xhr.open('post', window.location.pathname, true);
|
xhr.open('post', window.location.pathname, true);
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user