Add spinner; retain preview image order.

public/css/default.css

@@ -669,3 +669,44 @@ a#previous_photo:hover, a#next_photo:hover {
 		width: auto;
 	}
 }
+
+
+/* Upload form
+----------------*/
+#upload_preview_area {
+	margin: 10px 0;
+}
+#upload_preview_area img {
+	margin: 0 5px 0 0;
+}
+
+
+/* Spinner animation
+----------------------*/
+.spinner {
+	display: inline-block;
+	background-color: #74AFCF;
+	height: 20px;
+	width: 20px;
+	-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+	animation: sk-rotateplane 1.2s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-rotateplane {
+	0% { -webkit-transform: perspective(120px) }
+	50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+	100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+}
+
+@keyframes sk-rotateplane {
+	0% {
+		transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+		-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+	} 50% {
+		transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+		-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+	} 100% {
+		transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+		-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+	}
+}

public/js/upload_queue.js

@@ -1,38 +1,80 @@
 function UploadQueue(options) {
 	this.queue = options.queue_element;
 	this.previews = options.preview_area;
+	this.submit = options.submit_button;
 	this.addEvents();
 }
 
 UploadQueue.prototype.addEvents = function() {
 	var that = this;
 	that.queue.addEventListener('change', function() {
-		that.clearArea();
+		that.showSpinner(that.queue);
+		that.clearPreviews();
 		for (var i = 0; i < that.queue.files.length; i++) {
-			that.addPreviewForFile(that.queue.files[i]);
+			var callback = (i !== that.queue.files.length - 1) ? null : function() {
+				that.hideSpinner();
+			};
+			that.addPreviewForFile(that.queue.files[i], i, callback);
 		};
 	});
+	that.submit.addEventListener('click', function(e) {
+		e.preventDefault();
+		that.process();
+	});
 };
 
-UploadQueue.prototype.clearArea = function() {
+UploadQueue.prototype.clearPreviews = function() {
 	this.previews.innerHTML = '';
 }
 
-UploadQueue.prototype.addPreviewForFile = function(file) {
+UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
 	if (!file) {
 		return false;
 	}
 
 	var preview = document.createElement('img');
-	preview.id = ''
+	preview.id = 'upload_preview_' + index;
-	preview.style.maxWidth = '150px';
 	preview.style.maxHeight = '150px';
 
 	var reader = new FileReader();
 	var that = this;
-	reader.addEventListener('load', function() {
+	var appendMe = function() {
 		preview.src = reader.result;
+		if (callback) {
+			preview.addEventListener('load', function() {
+				callback();
+			});
+		}
 		that.previews.appendChild(preview);
-	}, false);
+	};
+	var waitForMe = function() {
+		var previews = that.previews.childNodes;
+		if (previews.length === 0 || previews[previews.length - 1].id === 'upload_preview_' + (index - 1)) {
+			appendMe();
+		} else {
+			setTimeout(waitForMe, 10);
+		}
+	};
+	reader.addEventListener('load', waitForMe, false);
 	reader.readAsDataURL(file);
 };
+
+UploadQueue.prototype.process = function() {
+	this.showSpinner(this.submit);
+	alert('Should now upload ' + this.queue.files.length + " files");
+};
+
+UploadQueue.prototype.showSpinner = function(sibling) {
+	if (this.spinner) {
+		return;
+	}
+
+	this.spinner = document.createElement('div');
+	this.spinner.className = 'spinner';
+	sibling.parentNode.appendChild(this.spinner);
+};
+
+UploadQueue.prototype.hideSpinner = function() {
+	this.spinner.parentNode.removeChild(this.spinner);
+	this.spinner = null;
+};

templates/MediaUploader.php

@@ -17,11 +17,11 @@ class MediaUploader extends SubTemplate
 					<h3>Select files</h3>
 					<input type="file" id="upload_queue" name="uploads[]" multiple>
 				</div>
-				<div id="upload_preview_area">
-				</div>
 				<div>
 					<input name="save" type="submit" value="Upload the lot">
 				</div>
+				<div id="upload_preview_area">
+				</div>
 			</form>
 			<script type="text/javascript" src="', BASEURL, '/js/upload_queue.js" defer="defer"></script>
 			<script type="text/javascript" defer="defer">
@@ -29,6 +29,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]")
 					});
 				}, 100);
 			</script>';