revamp upload process

res/include/script/ListNavigator.js

@@ -99,10 +99,10 @@ var ListNavigator = {
 		this.shuffle = !this.shuffle; // :P
 
 		if(this.shuffle){
-			$("#btnShuffle > span").html(" Shuffle ☑"); // Check icon
+			$("#btnShuffle > span").html("Shuffle ☑"); // Check icon
 			$("#btnShuffle").addClass("button_highlight");
 		}else{
-			$("#btnShuffle > span").html(" Shuffle ☐"); // Empty checkbox
+			$("#btnShuffle > span").html("Shuffle ☐"); // Empty checkbox
 			$("#btnShuffle").removeClass("button_highlight");
 		}
 	},
@@ -159,55 +159,8 @@ var ListNavigator = {
 		});
 		document.getElementById("list_navigator").innerHTML = listHTML;
 
-		var btnLastItem = document.createElement("button");
-		btnLastItem.innerText = "◀";
-		btnLastItem.setAttribute("id", "button_last_item");
-		btnLastItem.setAttribute("class", "button_highlight");
-		btnLastItem.setAttribute("onClick", "ListNavigator.previousItem();");
-
-		var btnNextItem = document.createElement("button");
-		btnNextItem.innerText = "▶";
-		btnNextItem.setAttribute("id", "button_next_item");
-		btnNextItem.setAttribute("class", "button_highlight");
-		btnNextItem.setAttribute("onClick", "ListNavigator.nextItem();");
-
-		var headerbar = document.getElementById("list_navigator_buttons");
-		headerbar.appendChild(btnLastItem);
-		headerbar.appendChild(btnNextItem);
-
-		// Add the list download button to the toolbar
-		var btnDownloadList = document.createElement("button");
-		btnDownloadList.setAttribute("id", "btnDownloadList");
-		btnDownloadList.setAttribute("class", "toolbar_button button_full_width");
-		btnDownloadList.setAttribute("onClick", "Toolbar.downloadList();");
-
-		var btnDownloadListImg = document.createElement("img");
-		btnDownloadListImg.setAttribute("src", "{{template `floppy_small.png`}}");
-		btnDownloadListImg.setAttribute("alt", "Download List");
-
-		var btnDownloadListText = document.createElement("span");
-		btnDownloadListText.innerHTML = " All Files";
-
-		btnDownloadList.appendChild(btnDownloadListImg);
-		btnDownloadList.appendChild(btnDownloadListText);
-		document.getElementById("btnDownload").after(btnDownloadList);
-
-		// Add the shuffle button to the toolbar
-		var btnShuffle = document.createElement("button");
-		btnShuffle.setAttribute("id", "btnShuffle");
-		btnShuffle.setAttribute("class", "toolbar_button button_full_width");
-		btnShuffle.setAttribute("onClick", "ListNavigator.toggleShuffle();");
-
-		var btnShuffleImg = document.createElement("img");
-		btnShuffleImg.setAttribute("src", "{{template `shuffle_small.png`}}");
-		btnShuffleImg.setAttribute("alt", "Shuffle playback order");
-
-		var btnShuffleText = document.createElement("span");
-		btnShuffleText.innerHTML = " Shuffle ☐";
-
-		btnShuffle.appendChild(btnShuffleImg);
-		btnShuffle.appendChild(btnShuffleText);
-		document.getElementById("btnShare").after(btnShuffle);
+		document.getElementById("btnDownloadList").style.display = "";
+		document.getElementById("btnShuffle").style.display = "";
 
 		// Make the navigator visible
 		document.getElementById("list_navigator").style.display = "inline-block";

res/include/script/compiled/home.js

@@ -37,6 +37,7 @@ var UploadProgressBar = /** @class */ (function () {
             id: id,
             name: this.file.name
         };
+        console.log("Upload finished: " + this.file.name + " " + id);
         this.uploadDiv.style.background = 'var(--file_background_color)';
         this.uploadDiv.href = '/u/' + id;
         this.uploadDiv.target = "_blank";
@@ -63,16 +64,8 @@ var UploadProgressBar = /** @class */ (function () {
     };
     return UploadProgressBar;
 }());
-function handleUploads(files) {
-    if (uploader === null) {
-        uploader = new UploadManager();
-    }
-    for (var i = 0; i < files.length; i++) {
-        uploader.uploadFile(new UploadProgressBar(files.item(i)));
-    }
-}
 // List creation
-function createList(title, anonymous) {
+function createListFull(title, anonymous) {
     if (uploader.uploading()) {
         var cont = confirm("Some files have not finished uploading yet. Creating a list now " +
             "will exclude those files.\n\nContinue?");
@@ -86,6 +79,9 @@ function createList(title, anonymous) {
         "files": new Array()
     };
     for (var i = 0; i < finishedUploads.length; i++) {
+        if (finishedUploads[i].id == "") {
+            continue;
+        }
         postData.files.push({
             "id": finishedUploads[i].id
         });
@@ -106,7 +102,7 @@ function createList(title, anonymous) {
                 + "List creation finished!<br/>"
                 + title + "<br/>"
                 + '<a href="/l/' + resp.id + '" target="_blank">' + window.location.hostname + '/l/' + resp.id + '</a>';
-            document.getElementById("uploads_queue").appendChild(div);
+            document.getElementById("created_lists").appendChild(div);
             window.open('/l/' + resp.id, '_blank');
         }
         else {
@@ -116,39 +112,11 @@ function createList(title, anonymous) {
             div.innerHTML = "List creation failed<br/>"
                 + "The server responded with:<br/>"
                 + resp.message;
-            document.getElementById("uploads_queue").append(div);
+            document.getElementById("created_lists").append(div);
         }
     };
     xhr.send(JSON.stringify(postData));
 }
-// Form upload handlers
-// Relay click event to hidden file field
-document.getElementById("select_file_button").onclick = function () {
-    document.getElementById("file_input_field").click();
-};
-document.getElementById("file_input_field").onchange = function (evt) {
-    handleUploads(evt.target.files);
-    // This resets the file input field
-    document.getElementById("file_input_field").nodeValue = "";
-};
-/*
- * Drag 'n Drop upload handlers
- */
-document.ondragover = function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-};
-document.ondragenter = function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-};
-document.addEventListener('drop', function (e) {
-    if (e.dataTransfer && e.dataTransfer.files.length > 0) {
-        e.preventDefault();
-        e.stopPropagation();
-        handleUploads(e.dataTransfer.files);
-    }
-});
 function copyText(text) {
     // Create a textarea to copy the text from
     var ta = document.createElement("textarea");
@@ -170,7 +138,7 @@ document.getElementById("btn_create_list").addEventListener("click", function (e
     if (title === null) {
         return;
     }
-    createList(title, false);
+    createListFull(title, false);
 });
 var btnCopyLinks = document.getElementById("btn_copy_links");
 btnCopyLinks.addEventListener("click", function () {
@@ -258,6 +226,7 @@ var UploadManager = /** @class */ (function () {
         this.uploadQueue = new Array();
         this.uploadThreads = new Array();
         this.maxThreads = 3;
+        this.finishCallback = null;
     }
     UploadManager.prototype.uploadFile = function (file) {
         console.debug("Adding upload to queue");
@@ -287,6 +256,9 @@ var UploadManager = /** @class */ (function () {
             return this.uploadQueue.shift();
         }
         else {
+            if (!this.uploading() && this.finishCallback !== null) {
+                this.finishCallback();
+            }
             return undefined;
         }
     };
@@ -305,9 +277,9 @@ var UploadWorker = /** @class */ (function () {
         }
     };
     UploadWorker.prototype.newFile = function () {
+        this.uploading = false;
         var file = this.manager.grabFile();
         if (file === undefined) { // No more files in the queue. We're finished
-            this.uploading = false;
             console.debug("No files left in queue");
             return; // Stop the thread
         }
@@ -334,7 +306,6 @@ var UploadWorker = /** @class */ (function () {
             if (xhr.readyState !== 4) {
                 return;
             }
-            console.log("status: " + xhr.status);
             if (xhr.status >= 100 && xhr.status < 400) {
                 var resp = JSON.parse(xhr.response);
                 // Request is a success

res/include/script/home_plain.js

@@ -0,0 +1,142 @@
+// Form upload handlers
+
+// Relay click event to hidden file field
+document.getElementById("select_file_button").onclick = function(){
+	document.getElementById("file_input_field").click()
+}
+
+document.getElementById("file_input_field").onchange = function(evt){
+	handleUploads(evt.target.files);
+
+	// This resets the file input field
+	document.getElementById("file_input_field").nodeValue = "";
+}
+
+/*
+ * Drag 'n Drop upload handlers
+ */
+document.ondragover = function (e) {
+	e.preventDefault()
+	e.stopPropagation()
+}
+document.ondragenter = function (e) {
+	e.preventDefault()
+	e.stopPropagation()
+}
+
+document.addEventListener('drop', function(e){
+	if (e.dataTransfer && e.dataTransfer.files.length > 0) {
+		e.preventDefault()
+		e.stopPropagation()
+
+		handleUploads(e.dataTransfer.files)
+	}
+})
+
+function handleUploads(files) {
+	if (uploader === null){
+		uploader = new UploadManager();
+		uploader.finishCallback = uploadsFinished;
+	}
+
+	for (var i = 0; i < files.length; i++) {
+		uploader.uploadFile(new UploadProgressBar(files.item(i)))
+	}
+
+	document.getElementById("instruction_2").style.display = "";
+	document.getElementById("instruction_3").style.display = "none";
+	document.getElementById("instruction_3_after").style.display = "none";
+}
+
+var shareLink = "";
+var shareTitle = "";
+
+async function uploadsFinished() {
+	let url = window.location.protocol+"//"+window.location.hostname;
+	if (window.location.port != "") {
+		url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port;
+	}
+
+	if (finishedUploads.length === 0) {
+		return;
+	} else if (finishedUploads.length === 1) {
+		shareLink = url+"/u/"+finishedUploads[0].id;
+		shareTitle = "Download "+finishedUploads[0].name+" here";
+	} else {
+		let id = await createList(totalUploads+" files", true);
+		console.log("Automatic list ID "+id);
+
+		if (id != "") {
+			shareLink = url+"/l/"+id;
+			shareTitle = "View "+totalUploads+" files here";
+		} else {
+			alert("Failed to group files. Please create list manually");
+		}
+	}
+
+	document.getElementById("instruction_3").style.display = "";
+	document.getElementById("instruction_3_after").style.display = "";
+
+	if (window.navigator && window.navigator.share) {
+		document.getElementById("social_buttons").style.display = "none";
+	} else {
+		document.getElementById("navigator_share_button").style.display = "none";
+	}
+}
+
+function shareButton() {
+	window.navigator.share({
+		title: "Pixeldrain",
+		text: shareTitle,
+		url: shareLink
+	});
+}
+
+function copyLink() {
+	if(copyText(shareLink)) {
+		console.log('Text copied');
+		document.querySelector("#btn_copy_link>span").textContent = "Copied!";
+		document.getElementById("btn_copy_link").classList.add("button_highlight");
+	} else {
+		console.log('Copying not supported');
+		alert("Your browser does not support copying text.");
+	}
+}
+
+function openLink() {
+	window.open(shareLink, '_blank');
+}
+
+function createList(title, anonymous) {
+	var postData = {
+		"title": title,
+		"anonymous": anonymous,
+		"files": new Array()
+	};
+	for (var i = 0; i < finishedUploads.length; i++) {
+		if (finishedUploads[i] == undefined) {
+			continue
+		}
+		postData.files.push({
+			"id": finishedUploads[i].id
+		});
+	}
+
+	return fetch(
+		apiEndpoint+"/list",
+		{
+			method: "POST",
+			headers: {"Content-Type": "application/json"},
+			body: JSON.stringify(postData)
+		}
+	).then(response => {
+		if (!response.ok) {
+			throw new Error("HTTP error "+response.status);
+		}
+		return response.json();
+	}).then(function (response) {
+		return response.id;
+	}).catch(function(error) {
+		console.log(error);
+	});
+}