diff --git a/public/css/default.css b/public/css/default.css index b18b1e4a..6e9c8870 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -676,10 +676,24 @@ a#previous_photo:hover, a#next_photo:hover { #upload_preview_area { margin: 10px 0; } -#upload_preview_area img { +#upload_preview_area > div { + display: inline-block; margin: 0 5px 0 0; + line-height: 0; + position: relative; +} +#upload_preview_area .progress { + position: absolute; + bottom: 0; + background: rgba(200, 200, 200, 0.5); + height: 5px; + width: 100%; +} +#upload_preview_area .progress > div { + background: #2b2; + height: 5px; + width: 0%; } - /* Spinner animation ----------------------*/ diff --git a/public/js/upload_queue.js b/public/js/upload_queue.js index 30465e66..21b8ffd2 100644 --- a/public/js/upload_queue.js +++ b/public/js/upload_queue.js @@ -1,6 +1,7 @@ function UploadQueue(options) { this.queue = options.queue_element; - this.previews = options.preview_area; + this.preview_area = options.preview_area; + this.upload_progress = []; this.submit = options.submit_button; this.addEvents(); } @@ -24,7 +25,7 @@ UploadQueue.prototype.addEvents = function() { }; UploadQueue.prototype.clearPreviews = function() { - this.previews.innerHTML = ''; + this.preview_area.innerHTML = ''; } UploadQueue.prototype.addPreviewForFile = function(file, index, callback) { @@ -33,9 +34,13 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) { } var preview = document.createElement('img'); - preview.id = 'upload_preview_' + index; + preview.title = file.name; preview.style.maxHeight = '150px'; + var preview_box = document.createElement('div'); + preview_box.id = 'upload_preview_' + index; + preview_box.appendChild(preview); + var reader = new FileReader(); var that = this; var appendMe = function() { @@ -45,10 +50,10 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) { callback(); }); } - that.previews.appendChild(preview); + that.preview_area.appendChild(preview_box); }; var waitForMe = function() { - var previews = that.previews.childNodes; + var previews = that.preview_area.childNodes; if (previews.length === 0 || previews[previews.length - 1].id === 'upload_preview_' + (index - 1)) { appendMe(); } else { @@ -60,8 +65,41 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) { }; UploadQueue.prototype.process = function() { - this.showSpinner(this.submit); - alert('Should now upload ' + this.queue.files.length + " files"); + this.showSpinner(this.submit, "Preparing to upload files..."); + var files = this.queue.files; + for (var i = 0; i < files.length; i++) { + this.setSpinnerLabel("Uploading file " + (i + 1) + " out of " + files.length); + this.updateProgress(i, 0.5); + var callback = (i !== files.length - 1) ? null : function() { + this.hideSpinner(); + }; + }; +}; + +UploadQueue.prototype.addProgressBar = function(index) { + if (index in this.upload_progress) { + return; + } + + var progress_container = document.createElement('div'); + progress_container.className = 'progress'; + + var progress = document.createElement('div'); + progress_container.appendChild(progress); + + var preview_box = document.getElementById('upload_preview_' + index); + preview_box.appendChild(progress_container); + + this.upload_progress[index] = progress; +}; + +UploadQueue.prototype.updateProgress = function(index, progress) { + if (!(index in this.upload_progress)) { + this.addProgressBar(index); + } + + var bar = this.upload_progress[index]; + bar.style.width = Math.ceil(progress * 100) + '%'; }; UploadQueue.prototype.showSpinner = function(sibling, label) { @@ -81,6 +119,12 @@ UploadQueue.prototype.showSpinner = function(sibling, label) { } }; +UploadQueue.prototype.setSpinnerLabel = function(label) { + if (this.spinner_label) { + this.spinner_label.innerHTML = label; + } +} + UploadQueue.prototype.hideSpinner = function() { if (this.spinner) { this.spinner.parentNode.removeChild(this.spinner);