From ddcc28aff6425fb6009fc0f98863b2bcf7d3e9c2 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Sun, 4 Sep 2016 14:39:21 +0200 Subject: [PATCH] Implement upload throttling: one file at a time. --- public/css/default.css | 5 +++++ public/js/upload_queue.js | 28 ++++++++++++++++++++-------- templates/MediaUploader.php | 6 +++--- 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index d800fc1..4b38af8 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -697,6 +697,11 @@ a#previous_photo:hover, a#next_photo:hover { #upload_preview_area .progress .error { background: #b22; } +#photo_submit:disabled { + background: #ccc; + color: #777; + border-color: #aaa; +} /* Spinner animation ----------------------*/ diff --git a/public/js/upload_queue.js b/public/js/upload_queue.js index bdc3a70..224408b 100644 --- a/public/js/upload_queue.js +++ b/public/js/upload_queue.js @@ -15,6 +15,7 @@ UploadQueue.prototype.addEvents = function() { for (var i = 0; i < that.queue.files.length; i++) { var callback = (i !== that.queue.files.length - 1) ? null : function() { that.hideSpinner(); + that.submit.disabled = false; }; that.addPreviewForFile(that.queue.files[i], i, callback); }; @@ -23,10 +24,13 @@ UploadQueue.prototype.addEvents = function() { e.preventDefault(); that.process(); }); + this.submit.disabled = true; }; UploadQueue.prototype.clearPreviews = function() { this.preview_area.innerHTML = ''; + this.submit.disabled = true; + this.current_upload_index = -1; } UploadQueue.prototype.addPreviewForFile = function(file, index, callback) { @@ -67,16 +71,24 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) { UploadQueue.prototype.process = function() { 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); - var callback = (i !== files.length - 1) ? null : function() { - this.hideSpinner(); - }; - this.sendFile(files[i], i, callback); - }; + if (this.queue.files.length > 0) { + this.submit.disabled = true; + this.nextFile(); + } }; +UploadQueue.prototype.nextFile = function() { + var files = this.queue.files; + var i = ++this.current_upload_index; + if (i === files.length) { + this.hideSpinner(); + } else { + this.setSpinnerLabel("Uploading file " + (i + 1) + " out of " + files.length); + this.sendFile(files[i], i, function() { + this.nextFile(); + }); + } +}; UploadQueue.prototype.sendFile = function(file, index, callback) { // Prepare the request. diff --git a/templates/MediaUploader.php b/templates/MediaUploader.php index 7df2c4e..c793d04 100644 --- a/templates/MediaUploader.php +++ b/templates/MediaUploader.php @@ -16,14 +16,14 @@ class MediaUploader extends SubTemplate protected function html_content() { echo ' -
+

Upload new photos to "', $this->tag->tag, '"

Select files

- +
@@ -34,7 +34,7 @@ class MediaUploader extends SubTemplate var upload_queue = new UploadQueue({ queue_element: document.getElementById("upload_queue"), preview_area: document.getElementById("upload_preview_area"), - submit_button: document.querySelector("input[type=submit]"), + submit_button: document.getElementById("photo_submit"), upload_url: "', BASEURL, '/uploadmedia/?format=json&tag=', $this->tag->id_tag, '" }); }, 100);