diff options
| -rw-r--r-- | view/css/conversation.css | 2 | ||||
| -rw-r--r-- | view/css/mod_cloud.css | 2 | ||||
| -rw-r--r-- | view/js/mod_cloud.js | 22 |
3 files changed, 21 insertions, 5 deletions
diff --git a/view/css/conversation.css b/view/css/conversation.css index d1adaf20f..5af0c55e7 100644 --- a/view/css/conversation.css +++ b/view/css/conversation.css @@ -43,7 +43,7 @@ #profile-jot-text.hover { background-color: aliceblue; opacity: 0.5; - box-shadow: inset 0 3px 4px #888; + box-shadow: inset 0 0px 7px #5cb85c; } .jot-attachment { diff --git a/view/css/mod_cloud.css b/view/css/mod_cloud.css index eb5bec1f1..53eb80b44 100644 --- a/view/css/mod_cloud.css +++ b/view/css/mod_cloud.css @@ -50,7 +50,7 @@ .upload-progress-bar { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOM2RFTDwAE2QHxFMHIIwAAAABJRU5ErkJggg==') repeat-y; - background-size: 3px; + background-size: 0px; padding: 0px !important; height: 3px; } diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js index 72e6185d6..cdcb0c8ee 100644 --- a/view/js/mod_cloud.js +++ b/view/js/mod_cloud.js @@ -88,13 +88,13 @@ function UploadFileSelectHandler(e) { function prepareHtml(f, i) { $("#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>' + f.name + '</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>' + '</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>' + '</tr>' ); @@ -134,6 +134,7 @@ function getIconFromType(type) { 'application/x-rar-compressed': 'fa-file-archive-o', //Audio 'audio/mpeg': 'fa-file-audio-o', + 'audio/mp3': 'fa-file-audio-o', //webkit browsers need that 'audio/wav': 'fa-file-audio-o', 'application/ogg': 'fa-file-audio-o', 'audio/ogg': 'fa-file-audio-o', @@ -158,27 +159,37 @@ function getIconFromType(type) { // upload files function UploadFile(file, idx) { - window.filesToUpload = window.filesToUpload + 1; + window.filesToUpload = window.filesToUpload + 1 var xhr = new XMLHttpRequest(); xhr.withCredentials = true; // Include the SESSION cookie info for authentication (xhr.upload || xhr).addEventListener('progress', function (e) { + var done = e.position || e.loaded; var total = e.totalSize || e.total; // Dynamically update the percentage complete displayed in the file upload list $('#upload-progress-' + idx).html(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) { + //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); window.fileUploadsCompleted = window.fileUploadsCompleted + 1; // When all the uploads have completed, refresh the page if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) { + window.fileUploadsCompleted = window.filesToUpload = 0; // 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 xhr.open('post', window.location.pathname, true); |