Basic per file upload

assets/css/upload.css

@@ -19,9 +19,9 @@
 .upload_message {
 	position: absolute;
 	display: inline-block;
-	width: 200px;
-	margin-left: -100px;
-	margin-top: -85px;
+	width: 450px;
+	margin-left: -225px;
+	margin-top: -160px;
 	background-color: #444;
 	background-image: -webkit-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
 	background-image: -moz-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
@@ -42,7 +42,79 @@
 	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 }
 
-	/* Icon ------------------------------------------------*/
+	/* Header ------------------------------------------------*/
+	.upload_message h1 {
+		float: left;
+		width: 100%;
+		padding: 12px 0px;
+		color: #fff;
+		font-size: 16px;
+		font-weight: bold;
+		text-shadow: 0px -1px 0px #222;
+		text-align: center;
+	}
+	.upload_message .close {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		padding: 11px 14px 6px 7px;
+		color: #aaa;
+		font-size: 20px;
+		text-shadow: 0px -1px 0px #222;
+		cursor: pointer;
+	}
+	.upload_message .close:hover {
+		color: #fff;
+	}
+
+	/* Rows ------------------------------------------------*/
+	.upload_message .rows {
+		float: left;
+		margin: 3px 8px 8px 8px;
+		width: calc(100% - 16px);
+		height: 300px;
+		background-color: rgba(0, 0, 0, .5);
+		overflow: hidden;
+		overflow-y: scroll;
+		border-radius: 3px;
+		box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .8);
+	}
+
+	/* Row ------------------------------------------------*/
+	.upload_message .rows .row {
+		display: inline-block;
+		padding: 13px 0px;
+		width: 100%;
+		background-color: rgba(255, 255, 255, .02);
+	}
+
+	.upload_message .rows .row:nth-child(2n) {
+		background-color: rgba(255, 255, 255, 0);
+	}
+
+		.upload_message .rows .row a.name {
+			float: left;
+			padding: 0px 10px;
+			color: #fff;
+			font-size: 14px;
+		}
+
+		.upload_message .rows .row a.status {
+			float: right;
+			padding: 0px 10px;
+			color: rgba(255, 255, 255, .5);
+			font-size: 14px;
+		}
+
+			.upload_message .rows .row a.status.error {
+				color: rgb(213, 24, 24);
+			}
+
+			.upload_message .rows .row a.status.success {
+				color: rgb(42, 213, 0);
+			}
+
+	/* Icon ------------------------------------------------
 	.upload_message a {
 		float: left;
 		width: 100%;
@@ -64,9 +136,9 @@
 		animation-duration: 2s;
 		animation-timing-function: ease-in-out;
 		animation-iteration-count: infinite;
-	}
+	}*/
 
-	/* Text ------------------------------------------------*/
+	/* Text ------------------------------------------------
 	.upload_message p {
 		float: left;
 		width: 100%;
@@ -74,10 +146,10 @@
 		color: #fff;
 		font-size: 14px;
 		text-align: center;
-		text-shadow: 0px -1px 0px rgba(0,0,0,.5);
+		text-shadow: 0px -1px 0px rgba(0,0,0,.5);*/
 	}
 
-	/* Progress ------------------------------------------------*/
+	/* Progress ------------------------------------------------
 	.upload_message .progressbar {
 		float: left;
 		width: 170px;
@@ -92,7 +164,6 @@
 		box-shadow: 0 1px 0 rgba(255,255,255,.06), inset 0px 0px 2px #222;
 		border-radius: 50px;
 
-		/* Animation */
 		-webkit-animation-name: moveBackground;
 		-webkit-animation-duration: 1s;
 		-webkit-animation-timing-function: linear;
@@ -120,4 +191,4 @@
 		-webkit-transition: width .2s, opacity .5;
 		-moz-transition: width .2s, opacity .5;
 		transition: width .2s, opacity .5;
-	}
+	}*/

assets/js/build.js

@@ -197,21 +197,37 @@ build = {
 
 	},
 
-	uploadModal: function(icon, text) {
+	uploadModal: function(icon, text, html) {
 
 		var modal = "";
 
-		modal += "<div class='upload_overlay fadeIn'>";
-		modal +=	"<div class='upload_message center'>";
-		modal +=		"<a class='icon-" + icon + "'></a>";
+		if (html!==null||html!==undefined) {
 
-		if (text!==undefined) modal += "<p>" + text + "</p>";
-		else modal += "<div class='progressbar'><div></div></div>";
+			modal += "<div class='upload_overlay fadeIn'>";
+			modal += "<div class='upload_message center'>";
+			modal +=	 "<h1>" + text + "</h1>";
+			modal +=	 "<a class='close icon-remove-sign'></a>";
+			modal += html;
+			modal += "</div>";
+			modal += "</div>";
 
-		modal +=	"</div>";
-		modal += "</div>";
+			return modal;
 
-		return modal;
+		} else {
+
+			modal += "<div class='upload_overlay fadeIn'>";
+			modal +=	"<div class='upload_message center'>";
+			modal +=		"<a class='icon-" + icon + "'></a>";
+
+			if (text!==undefined) modal += "<p>" + text + "</p>";
+			else modal += "<div class='progressbar'><div></div></div>";
+
+			modal +=	"</div>";
+			modal += "</div>";
+
+			return modal;
+
+		}
 
 	},
 

assets/js/lychee.js

@@ -300,6 +300,15 @@ var lychee = {
 
 	},
 
+	escapeHTML: function(s) {
+
+		return s.replace(/&/g, '&')
+				.replace(/"/g, '"')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;');
+
+	},
+
 	loadDropbox: function(callback) {
 
 		if (!lychee.dropbox&&lychee.dropboxKey) {

assets/js/upload.js

@@ -7,12 +7,12 @@
 
 upload = {
 
-	show: function(icon, text) {
+	show: function(icon, text, html) {
 
 		if (icon===undefined) icon = "upload";
 
 		upload.close(true);
-		$("body").append(build.uploadModal(icon, text));
+		$("body").append(build.uploadModal(icon, text, html));
 
 	},
 
@@ -55,75 +55,121 @@ upload = {
 
 		local: function(files) {
 
-			var pre_progress = 0,
-				formData = new FormData(),
-				xhr = new XMLHttpRequest(),
-				albumID = album.getID(),
-				popup,
-				progress;
+			var albumID = album.getID(),
+				html = "";
 
-			if (files.length<=0) return false;
-			if (albumID===false) albumID = 0;
+			var process = function(files, file) {
 
-			formData.append("function", "upload");
-			formData.append("albumID", albumID);
+				var formData = new FormData(),
+					xhr = new XMLHttpRequest(),
+					pre_progress = 0,
+					progress;
 
-			for (var i = 0; i < files.length; i++) {
+				formData.append("function", "upload");
+				formData.append("albumID", albumID);
+				formData.append(0, file);
 
-				if (files[i].type!=="image/jpeg"&&files[i].type!=="image/jpg"&&files[i].type!=="image/png"&&files[i].type!=="image/gif"&&files[i].type!=="image/webp") {
-					loadingBar.show("error", "The file format of " + files[i].name + " is not supported.");
-					return false;
-				} else {
-					formData.append(i, files[i]);
-				}
+				xhr.open("POST", lychee.api_path);
 
-			}
+				xhr.onload = function() {
 
-			upload.show();
+					var wait;
 
-			window.onbeforeunload = function() { return "Lychee is currently uploading!"; };
+					if (xhr.status===200) {
 
-			xhr.open("POST", lychee.api_path);
+						$(".upload_message .rows .row:nth-child(" + (file.num+1) + ") .status")
+							.html("Finished")
+							.addClass("success");
 
-			xhr.onload = function() {
+						file.ready = true;
+						wait = false;
 
-				if (xhr.status===200) {
+						for (var i = 0; i < files.length; i++) {
 
-					upload.close();
-					upload.notify("Upload complete");
+							if (files[i].ready===false) {
+								wait = true;
+								break;
+							}
 
-					window.onbeforeunload = null;
+						}
 
-					if (album.getID()===false) lychee.goto("0");
-					else album.load(albumID);
+						if (wait===false) {
 
-				}
+							$("#upload_files").val("");
 
-			};
+							if (album.getID()===false) lychee.goto("0");
+							else album.load(albumID);
 
-			xhr.upload.onprogress = function(e) {
+						}
 
-				if (e.lengthComputable) {
+					}
 
-					progress = (e.loaded / e.total * 100 | 0);
+				};
 
-					if (progress>pre_progress) {
-						upload.setProgress(progress);
-						pre_progress = progress;
-					}
+				xhr.upload.onprogress = function(e) {
+
+					if (e.lengthComputable) {
+
+						progress = (e.loaded / e.total * 100 | 0);
+
+						if (progress>pre_progress) {
+							$(".upload_message .rows .row:nth-child(" + (file.num+1) + ") .status").html(progress + "%");
+							pre_progress = progress;
+						}
+
+						if (progress>=100) {
+
+							$(".upload_message .rows .row:nth-child(" + (file.num+1) + ") .status").html("Processing");
+
+							if (file.next!==null) process(files, file.next);
+
+						}
 
-					if (progress>=100) {
-						upload.setIcon("cog");
-						upload.setText("Processing photos");
 					}
 
+				};
+
+				xhr.send(formData);
+
+			}
+
+			if (files.length<=0) return false;
+			if (albumID===false) albumID = 0;
+
+			html = "<div class='rows'>";
+
+			for (var i = 0; i < files.length; i++) {
+
+				files[i].num = i;
+				files[i].ready = false;
+
+				if (i < files.length-1) files[i].next = files[i+1];
+				else files[i].next = null;
+
+				if (files[i].type!=="image/jpeg"&&files[i].type!=="image/jpg"&&files[i].type!=="image/png"&&files[i].type!=="image/gif") {
+
+					files[i].ready = true;
+
+					// Generate html with error
+					html += "<div class='row'><a class='name'>" + lychee.escapeHTML(files[i].name) + "</a><a class='status error'>Not supported</a></div>";
+
+				} else {
+
+					// Generate html
+					html += "<div class='row'><a class='name'>" + lychee.escapeHTML(files[i].name) + "</a><a class='status'></a></div>";
+
 				}
 
-			};
+			}
+
+			html += "</div>";
+
+			window.onbeforeunload = function() { return "Lychee is currently uploading!"; };
+			window.onbeforeunload = null;
 
-			$("#upload_files").val("");
+			upload.show(null, "Uploading", html);
 
-			xhr.send(formData);
+			process(files, files[0]);
 
 		},