From ddcc28aff6425fb6009fc0f98863b2bcf7d3e9c2 Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
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 '
-			<form action="', BASEURL, '/uploadmedia/?tag=', $this->tag->id_tag, '" class="admin_box" method="post" enctype="multipart/form-data">
+			<form action="', BASEURL, '/uploadmedia/?tag=', $this->tag->id_tag, '" class="boxed_content" method="post" enctype="multipart/form-data">
 				<h2>Upload new photos to &quot;', $this->tag->tag, '&quot;</h2>
 				<div>
 					<h3>Select files</h3>
 					<input type="file" id="upload_queue" name="uploads[]" multiple>
 				</div>
 				<div>
-					<input name="save" type="submit" value="Upload the lot">
+					<input name="save" id="photo_submit" type="submit" value="Upload the lot">
 				</div>
 				<div id="upload_preview_area">
 				</div>
@@ -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);