WIP: new photo uploader.

public/js/upload_queue.js

@@ -0,0 +1,38 @@
+function UploadQueue(options) {
+	this.queue = options.queue_element;
+	this.previews = options.preview_area;
+	this.addEvents();
+}
+
+UploadQueue.prototype.addEvents = function() {
+	var that = this;
+	that.queue.addEventListener('change', function() {
+		that.clearArea();
+		for (var i = 0; i < that.queue.files.length; i++) {
+			that.addPreviewForFile(that.queue.files[i]);
+		};
+	});
+};
+
+UploadQueue.prototype.clearArea = function() {
+	this.previews.innerHTML = '';
+}
+
+UploadQueue.prototype.addPreviewForFile = function(file) {
+	if (!file) {
+		return false;
+	}
+
+	var preview = document.createElement('img');
+	preview.id = ''
+	preview.style.maxWidth = '150px';
+	preview.style.maxHeight = '150px';
+
+	var reader = new FileReader();
+	var that = this;
+	reader.addEventListener('load', function() {
+		preview.src = reader.result;
+		that.previews.appendChild(preview);
+	}, false);
+	reader.readAsDataURL(file);
+};

templates/MediaUploader.php

@@ -12,66 +12,25 @@ class MediaUploader extends SubTemplate
 	{
 		echo '
 			<form action="" class="admin_box" method="post" enctype="multipart/form-data">
-				<h2>Upload new media</h2>
+				<h2>Upload new photos</h2>
 				<div>
 					<h3>Select files</h3>
-					<ul>
+					<input type="file" id="upload_queue" name="uploads[]" multiple>
-						<li>
-							<input type="file" name="new_asset[0]"><br>
-							<input type="text" name="title[0]" placeholder="Custom title (optional)" size="50">
-						</li>
-						<li>
-							<input type="file" name="new_asset[1]"><br>
-							<input type="text" name="title[1]" placeholder="Custom title (optional)" size="50">
-						</li>
-						<li>
-							<input type="file" name="new_asset[2]"><br>
-							<input type="text" name="title[2]" placeholder="Custom title (optional)" size="50">
-						</li>
-					</ul>
 				</div>
-				<div>
+				<div id="upload_preview_area">
-					<h3>Link tags</h3>
-					<ul id="tag_list">
-						<li id="new_tag_container"><input type="text" id="new_tag" placeholder="Type to link a new tag"></li>
-					</ul>
 				</div>
-				<script type="text/javascript" src="', BASEURL, '/js/ajax.js"></script>
-				<script type="text/javascript" src="', BASEURL, '/js/autosuggest.js"></script>
-				<script type="text/javascript">
-					setTimeout(function() {
-						var tag_autosuggest = new TagAutoSuggest({
-							inputElement: "new_tag",
-							listElement: "tag_list",
-							baseUrl: "', BASEURL, '",
-							appendCallback: function(item) {
-								if (document.getElementById("linked_tag_" + item.id_tag)) {
-									return;
-								}
-
-								var newCheck = document.createElement("input");
-								newCheck.type = "checkbox";
-								newCheck.name = "tag[" + item.id_tag + "]";
-								newCheck.id = "linked_tag_" + item.id_tag;
-								newCheck.title = "Uncheck to delete";
-								newCheck.checked = "checked";
-
-								var newNode = document.createElement("li");
-								newNode.appendChild(newCheck);
-
-								var newLabel = document.createTextNode(item.label);
-								newNode.appendChild(newLabel);
-
-								var list = document.getElementById("tag_list");
-								var input = document.getElementById("new_tag_container");
-								list.insertBefore(newNode, input);
-							}
-						});
-					}, 100);
-				</script>
 				<div>
 					<input name="save" type="submit" value="Upload the lot">
 				</div>
-			</form>';
+			</form>
+			<script type="text/javascript" src="', BASEURL, '/js/upload_queue.js" defer="defer"></script>
+			<script type="text/javascript" defer="defer">
+				setTimeout(function() {
+					var upload_queue = new UploadQueue({
+						queue_element: document.getElementById("upload_queue"),
+						preview_area: document.getElementById("upload_preview_area"),
+					});
+				}, 100);
+			</script>';
 	}
 }