revamp upload process

2020-01-14 17:10:03 +01:00
parent 1702949632
commit 981a85c63e
45 changed files with 1495 additions and 208 deletions
--- a/res/include/img/icons/clipboard_small.png
+++ b/res/include/img/icons/clipboard_small.png
--- a/res/include/img/icons/close.svg
+++ b/res/include/img/icons/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
+</svg>
--- a/res/include/img/icons/copy.svg
+++ b/res/include/img/icons/copy.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/>
+</svg>
--- a/res/include/img/icons/email.svg
+++ b/res/include/img/icons/email.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M22 4H2v16h20V4zm-2 4l-8 5-8-5V6l8 5 8-5v2z"/>
+</svg>
--- a/res/include/img/icons/facebook.svg
+++ b/res/include/img/icons/facebook.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
+</svg>
--- a/res/include/img/icons/floppy_small.png
+++ b/res/include/img/icons/floppy_small.png
--- a/res/include/img/icons/help.svg
+++ b/res/include/img/icons/help.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
+</svg>
--- a/res/include/img/icons/info_small.png
+++ b/res/include/img/icons/info_small.png
--- a/res/include/img/icons/open_in_new.svg
+++ b/res/include/img/icons/open_in_new.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
+</svg>
--- a/res/include/img/icons/reddit.svg
+++ b/res/include/img/icons/reddit.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z" />
+</svg>
--- a/res/include/img/icons/save.svg
+++ b/res/include/img/icons/save.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
+</svg>
--- a/res/include/img/icons/share.svg
+++ b/res/include/img/icons/share.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
+</svg>
--- a/res/include/img/icons/share_small.png
+++ b/res/include/img/icons/share_small.png
--- a/res/include/img/icons/shuffle.svg
+++ b/res/include/img/icons/shuffle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/>
+</svg>
--- a/res/include/img/icons/shuffle_small.png
+++ b/res/include/img/icons/shuffle_small.png
--- a/res/include/img/icons/social_email.png
+++ b/res/include/img/icons/social_email.png
--- a/res/include/img/icons/social_facebook.png
+++ b/res/include/img/icons/social_facebook.png
--- a/res/include/img/icons/social_googleplus.png
+++ b/res/include/img/icons/social_googleplus.png
--- a/res/include/img/icons/social_reddit.png
+++ b/res/include/img/icons/social_reddit.png
--- a/res/include/img/icons/social_stumbleupon.png
+++ b/res/include/img/icons/social_stumbleupon.png
--- a/res/include/img/icons/social_tumblr.png
+++ b/res/include/img/icons/social_tumblr.png
--- a/res/include/img/icons/social_twitter.png
+++ b/res/include/img/icons/social_twitter.png
--- a/res/include/img/icons/social_voat.png
+++ b/res/include/img/icons/social_voat.png
--- a/res/include/img/icons/tumblr.svg
+++ b/res/include/img/icons/tumblr.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17" />
+</svg>
--- a/res/include/img/icons/twitter.svg
+++ b/res/include/img/icons/twitter.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
+</svg>
--- a/res/include/img/icons/upload.svg
+++ b/res/include/img/icons/upload.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path fill="#{{.Style.InputTextColor.RGB}}" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
+</svg>
--- a/res/include/script/ListNavigator.js
+++ b/res/include/script/ListNavigator.js
@@ -99,10 +99,10 @@ var ListNavigator = {
 		this.shuffle = !this.shuffle; // :P

 		if(this.shuffle){
-			$("#btnShuffle > span").html("&nbsp;Shuffle&nbsp;&#x2611;"); // Check icon
+			$("#btnShuffle > span").html("Shuffle&nbsp;&#x2611;"); // Check icon
 			$("#btnShuffle").addClass("button_highlight");
 		}else{
-			$("#btnShuffle > span").html("&nbsp;Shuffle&nbsp;&#x2610;"); // Empty checkbox
+			$("#btnShuffle > span").html("Shuffle&nbsp;&#x2610;"); // 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 = "&nbsp;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 = "&nbsp;Shuffle&nbsp;&#x2610;";
-
-		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";
--- a/res/include/script/compiled/home.js
+++ b/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
--- a/res/include/script/home_plain.js
+++ b/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);
+	});
+}
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -127,7 +127,7 @@ body{
 	box-sizing: border-box;
 	clear: both;
 }
-.page_body > .page_content > .limit_width {
+.limit_width {
 	position: relative;
 	display: inline-block;
 	max-width: 1000px;
--- a/res/include/style/viewer.css
+++ b/res/include/style/viewer.css
@@ -52,9 +52,6 @@
 	.file_viewer > .file_viewer_headerbar > .button_home::after {
 		content: "pd";
 	}
-	.file_viewer > .file_viewer_headerbar > .list_navigator_buttons {
-		display: none;
-	}
 }
 .file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title > span {
 	flex-grow: 0;
@@ -146,7 +143,7 @@
 	overflow-x: hidden;
 	float: left;
 	background-color: var(--layer_1_color);
-	/* box-shadow: 2px 2px 8px var(--shadow_color); */
+	box-shadow: inset 1px 1px 6px var(--shadow_color);
 	text-align: center;
 	z-index: 48;
 	overflow: hidden;
@@ -264,6 +261,11 @@
   ========================= */

 .sharebar-button {text-align: center;}
+.sharebar-button > svg,
+.sharebar-button > img {
+	width: 40px;
+	height: 40px;
+}

 /* =====================
   || MISC COMPONENTS ||
--- a/res/static/misc/wasm/index.html
+++ b/res/static/misc/wasm/index.html
@@ -0,0 +1,13 @@
+<html>
+	<head>
+		<meta charset="utf-8"/>
+		<script src="wasm_exec.js"></script>
+		<script>
+			const go = new Go();
+			WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
+				go.run(result.instance);
+			});
+		</script>
+	</head>
+	<body></body>
+</html>
--- a/res/static/misc/wasm/main.wasm
+++ b/res/static/misc/wasm/main.wasm
--- a/res/static/misc/wasm/wasm_exec.js
+++ b/res/static/misc/wasm/wasm_exec.js
@@ -0,0 +1,533 @@
+// Copyright 2018 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+(() => {
+	// Map multiple JavaScript environments to a single common API,
+	// preferring web standards over Node.js API.
+	//
+	// Environments considered:
+	// - Browsers
+	// - Node.js
+	// - Electron
+	// - Parcel
+
+	if (typeof global !== "undefined") {
+		// global already exists
+	} else if (typeof window !== "undefined") {
+		window.global = window;
+	} else if (typeof self !== "undefined") {
+		self.global = self;
+	} else {
+		throw new Error("cannot export Go (neither global, window nor self is defined)");
+	}
+
+	if (!global.require && typeof require !== "undefined") {
+		global.require = require;
+	}
+
+	if (!global.fs && global.require) {
+		global.fs = require("fs");
+	}
+
+	if (!global.fs) {
+		let outputBuf = "";
+		global.fs = {
+			constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused
+			writeSync(fd, buf) {
+				outputBuf += decoder.decode(buf);
+				const nl = outputBuf.lastIndexOf("\n");
+				if (nl != -1) {
+					console.log(outputBuf.substr(0, nl));
+					outputBuf = outputBuf.substr(nl + 1);
+				}
+				return buf.length;
+			},
+			write(fd, buf, offset, length, position, callback) {
+				if (offset !== 0 || length !== buf.length || position !== null) {
+					throw new Error("not implemented");
+				}
+				const n = this.writeSync(fd, buf);
+				callback(null, n);
+			},
+			open(path, flags, mode, callback) {
+				const err = new Error("not implemented");
+				err.code = "ENOSYS";
+				callback(err);
+			},
+			read(fd, buffer, offset, length, position, callback) {
+				const err = new Error("not implemented");
+				err.code = "ENOSYS";
+				callback(err);
+			},
+			fsync(fd, callback) {
+				callback(null);
+			},
+		};
+	}
+
+	if (!global.crypto) {
+		const nodeCrypto = require("crypto");
+		global.crypto = {
+			getRandomValues(b) {
+				nodeCrypto.randomFillSync(b);
+			},
+		};
+	}
+
+	if (!global.performance) {
+		global.performance = {
+			now() {
+				const [sec, nsec] = process.hrtime();
+				return sec * 1000 + nsec / 1000000;
+			},
+		};
+	}
+
+	if (!global.TextEncoder) {
+		global.TextEncoder = require("util").TextEncoder;
+	}
+
+	if (!global.TextDecoder) {
+		global.TextDecoder = require("util").TextDecoder;
+	}
+
+	// End of polyfills for common API.
+
+	const encoder = new TextEncoder("utf-8");
+	const decoder = new TextDecoder("utf-8");
+
+	global.Go = class {
+		constructor() {
+			this.argv = ["js"];
+			this.env = {};
+			this.exit = (code) => {
+				if (code !== 0) {
+					console.warn("exit code:", code);
+				}
+			};
+			this._exitPromise = new Promise((resolve) => {
+				this._resolveExitPromise = resolve;
+			});
+			this._pendingEvent = null;
+			this._scheduledTimeouts = new Map();
+			this._nextCallbackTimeoutID = 1;
+
+			const mem = () => {
+				// The buffer may change when requesting more memory.
+				return new DataView(this._inst.exports.mem.buffer);
+			}
+
+			const setInt64 = (addr, v) => {
+				mem().setUint32(addr + 0, v, true);
+				mem().setUint32(addr + 4, Math.floor(v / 4294967296), true);
+			}
+
+			const getInt64 = (addr) => {
+				const low = mem().getUint32(addr + 0, true);
+				const high = mem().getInt32(addr + 4, true);
+				return low + high * 4294967296;
+			}
+
+			const loadValue = (addr) => {
+				const f = mem().getFloat64(addr, true);
+				if (f === 0) {
+					return undefined;
+				}
+				if (!isNaN(f)) {
+					return f;
+				}
+
+				const id = mem().getUint32(addr, true);
+				return this._values[id];
+			}
+
+			const storeValue = (addr, v) => {
+				const nanHead = 0x7FF80000;
+
+				if (typeof v === "number") {
+					if (isNaN(v)) {
+						mem().setUint32(addr + 4, nanHead, true);
+						mem().setUint32(addr, 0, true);
+						return;
+					}
+					if (v === 0) {
+						mem().setUint32(addr + 4, nanHead, true);
+						mem().setUint32(addr, 1, true);
+						return;
+					}
+					mem().setFloat64(addr, v, true);
+					return;
+				}
+
+				switch (v) {
+					case undefined:
+						mem().setFloat64(addr, 0, true);
+						return;
+					case null:
+						mem().setUint32(addr + 4, nanHead, true);
+						mem().setUint32(addr, 2, true);
+						return;
+					case true:
+						mem().setUint32(addr + 4, nanHead, true);
+						mem().setUint32(addr, 3, true);
+						return;
+					case false:
+						mem().setUint32(addr + 4, nanHead, true);
+						mem().setUint32(addr, 4, true);
+						return;
+				}
+
+				let ref = this._refs.get(v);
+				if (ref === undefined) {
+					ref = this._values.length;
+					this._values.push(v);
+					this._refs.set(v, ref);
+				}
+				let typeFlag = 0;
+				switch (typeof v) {
+					case "string":
+						typeFlag = 1;
+						break;
+					case "symbol":
+						typeFlag = 2;
+						break;
+					case "function":
+						typeFlag = 3;
+						break;
+				}
+				mem().setUint32(addr + 4, nanHead | typeFlag, true);
+				mem().setUint32(addr, ref, true);
+			}
+
+			const loadSlice = (addr) => {
+				const array = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				return new Uint8Array(this._inst.exports.mem.buffer, array, len);
+			}
+
+			const loadSliceOfValues = (addr) => {
+				const array = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				const a = new Array(len);
+				for (let i = 0; i < len; i++) {
+					a[i] = loadValue(array + i * 8);
+				}
+				return a;
+			}
+
+			const loadString = (addr) => {
+				const saddr = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				return decoder.decode(new DataView(this._inst.exports.mem.buffer, saddr, len));
+			}
+
+			const timeOrigin = Date.now() - performance.now();
+			this.importObject = {
+				go: {
+					// Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters)
+					// may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported
+					// function. A goroutine can switch to a new stack if the current stack is too small (see morestack function).
+					// This changes the SP, thus we have to update the SP used by the imported function.
+
+					// func wasmExit(code int32)
+					"runtime.wasmExit": (sp) => {
+						const code = mem().getInt32(sp + 8, true);
+						this.exited = true;
+						delete this._inst;
+						delete this._values;
+						delete this._refs;
+						this.exit(code);
+					},
+
+					// func wasmWrite(fd uintptr, p unsafe.Pointer, n int32)
+					"runtime.wasmWrite": (sp) => {
+						const fd = getInt64(sp + 8);
+						const p = getInt64(sp + 16);
+						const n = mem().getInt32(sp + 24, true);
+						fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n));
+					},
+
+					// func nanotime() int64
+					"runtime.nanotime": (sp) => {
+						setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000);
+					},
+
+					// func walltime() (sec int64, nsec int32)
+					"runtime.walltime": (sp) => {
+						const msec = (new Date).getTime();
+						setInt64(sp + 8, msec / 1000);
+						mem().setInt32(sp + 16, (msec % 1000) * 1000000, true);
+					},
+
+					// func scheduleTimeoutEvent(delay int64) int32
+					"runtime.scheduleTimeoutEvent": (sp) => {
+						const id = this._nextCallbackTimeoutID;
+						this._nextCallbackTimeoutID++;
+						this._scheduledTimeouts.set(id, setTimeout(
+							() => {
+								this._resume();
+								while (this._scheduledTimeouts.has(id)) {
+									// for some reason Go failed to register the timeout event, log and try again
+									// (temporary workaround for https://github.com/golang/go/issues/28975)
+									console.warn("scheduleTimeoutEvent: missed timeout event");
+									this._resume();
+								}
+							},
+							getInt64(sp + 8) + 1, // setTimeout has been seen to fire up to 1 millisecond early
+						));
+						mem().setInt32(sp + 16, id, true);
+					},
+
+					// func clearTimeoutEvent(id int32)
+					"runtime.clearTimeoutEvent": (sp) => {
+						const id = mem().getInt32(sp + 8, true);
+						clearTimeout(this._scheduledTimeouts.get(id));
+						this._scheduledTimeouts.delete(id);
+					},
+
+					// func getRandomData(r []byte)
+					"runtime.getRandomData": (sp) => {
+						crypto.getRandomValues(loadSlice(sp + 8));
+					},
+
+					// func stringVal(value string) ref
+					"syscall/js.stringVal": (sp) => {
+						storeValue(sp + 24, loadString(sp + 8));
+					},
+
+					// func valueGet(v ref, p string) ref
+					"syscall/js.valueGet": (sp) => {
+						const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16));
+						sp = this._inst.exports.getsp(); // see comment above
+						storeValue(sp + 32, result);
+					},
+
+					// func valueSet(v ref, p string, x ref)
+					"syscall/js.valueSet": (sp) => {
+						Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32));
+					},
+
+					// func valueIndex(v ref, i int) ref
+					"syscall/js.valueIndex": (sp) => {
+						storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16)));
+					},
+
+					// valueSetIndex(v ref, i int, x ref)
+					"syscall/js.valueSetIndex": (sp) => {
+						Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24));
+					},
+
+					// func valueCall(v ref, m string, args []ref) (ref, bool)
+					"syscall/js.valueCall": (sp) => {
+						try {
+							const v = loadValue(sp + 8);
+							const m = Reflect.get(v, loadString(sp + 16));
+							const args = loadSliceOfValues(sp + 32);
+							const result = Reflect.apply(m, v, args);
+							sp = this._inst.exports.getsp(); // see comment above
+							storeValue(sp + 56, result);
+							mem().setUint8(sp + 64, 1);
+						} catch (err) {
+							storeValue(sp + 56, err);
+							mem().setUint8(sp + 64, 0);
+						}
+					},
+
+					// func valueInvoke(v ref, args []ref) (ref, bool)
+					"syscall/js.valueInvoke": (sp) => {
+						try {
+							const v = loadValue(sp + 8);
+							const args = loadSliceOfValues(sp + 16);
+							const result = Reflect.apply(v, undefined, args);
+							sp = this._inst.exports.getsp(); // see comment above
+							storeValue(sp + 40, result);
+							mem().setUint8(sp + 48, 1);
+						} catch (err) {
+							storeValue(sp + 40, err);
+							mem().setUint8(sp + 48, 0);
+						}
+					},
+
+					// func valueNew(v ref, args []ref) (ref, bool)
+					"syscall/js.valueNew": (sp) => {
+						try {
+							const v = loadValue(sp + 8);
+							const args = loadSliceOfValues(sp + 16);
+							const result = Reflect.construct(v, args);
+							sp = this._inst.exports.getsp(); // see comment above
+							storeValue(sp + 40, result);
+							mem().setUint8(sp + 48, 1);
+						} catch (err) {
+							storeValue(sp + 40, err);
+							mem().setUint8(sp + 48, 0);
+						}
+					},
+
+					// func valueLength(v ref) int
+					"syscall/js.valueLength": (sp) => {
+						setInt64(sp + 16, parseInt(loadValue(sp + 8).length));
+					},
+
+					// valuePrepareString(v ref) (ref, int)
+					"syscall/js.valuePrepareString": (sp) => {
+						const str = encoder.encode(String(loadValue(sp + 8)));
+						storeValue(sp + 16, str);
+						setInt64(sp + 24, str.length);
+					},
+
+					// valueLoadString(v ref, b []byte)
+					"syscall/js.valueLoadString": (sp) => {
+						const str = loadValue(sp + 8);
+						loadSlice(sp + 16).set(str);
+					},
+
+					// func valueInstanceOf(v ref, t ref) bool
+					"syscall/js.valueInstanceOf": (sp) => {
+						mem().setUint8(sp + 24, loadValue(sp + 8) instanceof loadValue(sp + 16));
+					},
+
+					// func copyBytesToGo(dst []byte, src ref) (int, bool)
+					"syscall/js.copyBytesToGo": (sp) => {
+						const dst = loadSlice(sp + 8);
+						const src = loadValue(sp + 32);
+						if (!(src instanceof Uint8Array)) {
+							mem().setUint8(sp + 48, 0);
+							return;
+						}
+						const toCopy = src.subarray(0, dst.length);
+						dst.set(toCopy);
+						setInt64(sp + 40, toCopy.length);
+						mem().setUint8(sp + 48, 1);
+					},
+
+					// func copyBytesToJS(dst ref, src []byte) (int, bool)
+					"syscall/js.copyBytesToJS": (sp) => {
+						const dst = loadValue(sp + 8);
+						const src = loadSlice(sp + 16);
+						if (!(dst instanceof Uint8Array)) {
+							mem().setUint8(sp + 48, 0);
+							return;
+						}
+						const toCopy = src.subarray(0, dst.length);
+						dst.set(toCopy);
+						setInt64(sp + 40, toCopy.length);
+						mem().setUint8(sp + 48, 1);
+					},
+
+					"debug": (value) => {
+						console.log(value);
+					},
+				}
+			};
+		}
+
+		async run(instance) {
+			this._inst = instance;
+			this._values = [ // TODO: garbage collection
+				NaN,
+				0,
+				null,
+				true,
+				false,
+				global,
+				this,
+			];
+			this._refs = new Map();
+			this.exited = false;
+
+			const mem = new DataView(this._inst.exports.mem.buffer)
+
+			// Pass command line arguments and environment variables to WebAssembly by writing them to the linear memory.
+			let offset = 4096;
+
+			const strPtr = (str) => {
+				const ptr = offset;
+				const bytes = encoder.encode(str + "\0");
+				new Uint8Array(mem.buffer, offset, bytes.length).set(bytes);
+				offset += bytes.length;
+				if (offset % 8 !== 0) {
+					offset += 8 - (offset % 8);
+				}
+				return ptr;
+			};
+
+			const argc = this.argv.length;
+
+			const argvPtrs = [];
+			this.argv.forEach((arg) => {
+				argvPtrs.push(strPtr(arg));
+			});
+
+			const keys = Object.keys(this.env).sort();
+			argvPtrs.push(keys.length);
+			keys.forEach((key) => {
+				argvPtrs.push(strPtr(`${key}=${this.env[key]}`));
+			});
+
+			const argv = offset;
+			argvPtrs.forEach((ptr) => {
+				mem.setUint32(offset, ptr, true);
+				mem.setUint32(offset + 4, 0, true);
+				offset += 8;
+			});
+
+			this._inst.exports.run(argc, argv);
+			if (this.exited) {
+				this._resolveExitPromise();
+			}
+			await this._exitPromise;
+		}
+
+		_resume() {
+			if (this.exited) {
+				throw new Error("Go program has already exited");
+			}
+			this._inst.exports.resume();
+			if (this.exited) {
+				this._resolveExitPromise();
+			}
+		}
+
+		_makeFuncWrapper(id) {
+			const go = this;
+			return function () {
+				const event = { id: id, this: this, args: arguments };
+				go._pendingEvent = event;
+				go._resume();
+				return event.result;
+			};
+		}
+	}
+
+	if (
+		global.require &&
+		global.require.main === module &&
+		global.process &&
+		global.process.versions &&
+		!global.process.versions.electron
+	) {
+		if (process.argv.length < 3) {
+			console.error("usage: go_js_wasm_exec [wasm binary] [arguments]");
+			process.exit(1);
+		}
+
+		const go = new Go();
+		go.argv = process.argv.slice(2);
+		go.env = Object.assign({ TMPDIR: require("os").tmpdir() }, process.env);
+		go.exit = process.exit;
+		WebAssembly.instantiate(fs.readFileSync(process.argv[2]), go.importObject).then((result) => {
+			process.on("exit", (code) => { // Node.js exits if no event handler is pending
+				if (code === 0 && !go.exited) {
+					// deadlock, make Go print error and stack traces
+					go._pendingEvent = { id: 0 };
+					go._resume();
+				}
+			});
+			return go.run(result.instance);
+		}).catch((err) => {
+			console.error(err);
+			process.exit(1);
+		});
+	}
+})();
--- a/res/static/typescript/home/home.ts
+++ b/res/static/typescript/home/home.ts
@@ -48,6 +48,7 @@ class UploadProgressBar implements FileUpload {
 			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
@@ -78,18 +79,9 @@ class UploadProgressBar implements FileUpload {
 	}
 }

-function handleUploads(files: FileList) {
-	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: string, anonymous: boolean){
+function createListFull(title: string, anonymous: boolean){
 	if (uploader.uploading()) {
 		var cont = confirm(
 			"Some files have not finished uploading yet. Creating a list now "+
@@ -105,6 +97,9 @@ function createList(title: string, anonymous: boolean){
 		"files": new Array()
 	};
 	for (var i = 0; i < finishedUploads.length; i++) {
+		if (finishedUploads[i].id == "") {
+			continue
+		}
 		postData.files.push({
 			"id": finishedUploads[i].id
 		});
@@ -125,7 +120,7 @@ function createList(title: string, anonymous: boolean){
 				+ "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 {
 			console.log("status: "+xhr.status+" response: "+xhr.response)
@@ -134,48 +129,13 @@ function createList(title: string, anonymous: boolean){
 			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((<HTMLInputElement>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: DragEvent){
-	if (e.dataTransfer && e.dataTransfer.files.length > 0) {
-		e.preventDefault()
-		e.stopPropagation()
-
-		handleUploads(e.dataTransfer.files)
-	}
-})
-
 function copyText(text: string) : boolean {
 	// Create a textarea to copy the text from
 	var ta = document.createElement("textarea");
@@ -201,7 +161,7 @@ document.getElementById("btn_create_list").addEventListener("click", function(ev
 	if(title === null){
 		return;
 	}
-	createList(title, false);
+	createListFull(title, false);
 });

 var btnCopyLinks = document.getElementById("btn_copy_links");
--- a/res/static/typescript/lib/uploader.ts
+++ b/res/static/typescript/lib/uploader.ts
@@ -12,6 +12,7 @@ class UploadManager {
 	private uploadQueue:   Array<FileUpload>   = new Array();
 	private uploadThreads: Array<UploadWorker> = new Array();
 	private maxThreads:    number              = 3;
+	public  finishCallback: () => void         = null;

 	public uploadFile(file: FileUpload) {
 		console.debug("Adding upload to queue")
@@ -40,8 +41,11 @@ class UploadManager {

 	public grabFile(): FileUpload | undefined {
 		if (this.uploadQueue.length > 0) {
-			return this.uploadQueue.shift()
+			return this.uploadQueue.shift();
 		} else {
+			if (!this.uploading() && this.finishCallback !== null) {
+				this.finishCallback();
+			}
 			return undefined
 		}
 	}
@@ -63,9 +67,10 @@ class UploadWorker {
 	}

 	private newFile() {
+		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
 		}
@@ -97,7 +102,6 @@ class UploadWorker {

 		xhr.onreadystatechange = function(){
 			if (xhr.readyState !== 4) {return;}
-			console.log("status: "+xhr.status)

 			if (xhr.status >= 100 && xhr.status < 400) {
 				var resp = JSON.parse(xhr.response);
--- a/res/template/file_viewer.html
+++ b/res/template/file_viewer.html
@@ -32,69 +32,62 @@
 					<div id="file_viewer_list_title"></div>
 					<div id="file_viewer_file_title">{{.Title}}</div>
 				</div>
-				<div id="list_navigator_buttons" class="button_group list_navigator_buttons"></div>
-				<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">🞫</button>
+				<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">{{template `close.svg`}}</button>
 			</div>
 			<div id="list_navigator" class="list_navigator"></div>
 			<div id="file_viewer_window" class="file_viewer_window">
-				<div id="toolbar" class="file_viewer_toolbar">
-					<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers -->
-					<div>
-						<div>
-							<div id="stat_views_label" class="toolbar_label">Views</div>
-							<div id="stat_views" style="text-align: center;">N/A</div>
-							<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
-							<div id="stat_downloads" style="text-align: center;">N/A</div>
+				<div id="toolbar" class="file_viewer_toolbar"><div><div>
+					<div id="stat_views_label" class="toolbar_label">Views</div>
+					<div id="stat_views" style="text-align: center;">N/A</div>
+					<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
+					<div id="stat_downloads" style="text-align: center;">N/A</div>

-							<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
-								<img src="{{template `floppy_small.png`}}" alt="Download this file"/>
-								<span>Download</span>
-							</button>
-							<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
-								<img src="{{template `clipboard_small.png`}}" alt="Copy file URL to clipboard"/>
-								<span><u>C</u>opy Link</span>
-							</button>
-							<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
-								<img src="{{template `share_small.png`}}" alt="Share this file on social media"/>
-								<span>Share</span>
-							</button>
-							<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
-								<img src="{{template `info_small.png`}}" alt="Help"/>
-								<span>Deta<u>i</u>ls</span>
-							</button>
-							{{template "advertisement" .}}
+					<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
+						{{template `save.svg` .}}
+						<span>Download</span>
+					</button>
+					<button id="btnDownloadList" class="toolbar_button button_full_width" style="display: none" onClick="Toolbar.downloadList()">
+						{{template `save.svg` .}}
+						<span>DL all files</span>
+					</button>
+					<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
+						{{template `copy.svg` .}}
+						<span><u>C</u>opy Link</span>
+					</button>
+					<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
+						{{template `share.svg` .}}
+						<span>Share</span>
+					</button>
+					<button id="btnShuffle" class="toolbar_button button_full_width" style="display: none" onClick="ListNavigator.toggleShuffle();">
+						{{template `shuffle.svg` .}}
+						<span>Shuffle &#x2610;</span>
+					</button>
+					<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
+						{{template `help.svg` .}}
+						<span>Deta<u>i</u>ls</span>
+					</button>
+					{{template "advertisement" .}}

-							<!-- This frame will load the download URL when a download button is pressed -->
-							<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
-						</div>
-					</div>
-				</div>
+					<!-- This frame will load the download URL when a download button is pressed -->
+					<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
+				</div></div></div>

 				<div id="sharebar" class="file_viewer_sharebar">
 					Share on:<br/>
-					<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=' + window.location.href);">
-						<img src="{{template `social_email.png`}}" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
-						<br/>E-Mail
+					<button class="sharebar-button button_full_width" onclick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=' + window.location.href);">
+						{{template `email.svg` .}}<br/>E-Mail
 					</button>
 					<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
-						<img src="{{template `social_reddit.png`}}" alt="Share on Reddit" style="width:40px; height: 40px;"/>
-						<br/>Reddit
+						{{template `reddit.svg` .}}<br/>Reddit
 					</button>
-					<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?url=' + window.location.href);">
-						<img src="{{template `social_twitter.png`}}" alt="Share on Twitter" style="width:40px; height: 40px;"/>
-						<br/>Twitter
+					<button class="sharebar-button button_full_width" onclick="window.open('https://twitter.com/share?url=' + window.location.href);">
+						{{template `twitter.svg` .}}<br/>Twitter
 					</button>
-					<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
-						<img src="{{template `social_facebook.png`}}" alt="Share on Facebook" style="width:40px; height: 40px;"/>
-						<br/>Facebook
+					<button class="sharebar-button button_full_width" onclick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
+						{{template `facebook.svg` .}}<br/>Facebook
 					</button>
-					<button class="sharebar-button button_full_width" onClick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
-						<img src="{{template `social_tumblr.png`}}" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
-						<br/>Tumblr
-					</button>
-					<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
-						<img src="{{template `social_voat.png`}}" alt="Share on Voat" style="width:40px; height: 40px;"/>
-						<br/>Voat
+					<button class="sharebar-button button_full_width" onclick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
+						{{template `tumblr.svg` .}}<br/>Tumblr
 					</button>
 				</div>

--- a/res/template/home.html
+++ b/res/template/home.html
@@ -4,6 +4,44 @@
 	<head>
 		{{template "meta_tags" "Free file sharing service"}}
 		{{template "user_style" .}}
+		<style>
+		.instruction_highlight {
+			border-top: 1px solid var(--layer_2_color_border);
+			border-bottom: 1px solid var(--layer_2_color_border);
+			box-sizing: border-box;
+			margin: 10px 0;
+			padding: 5px;
+		}
+		.big_number {
+			font-size: 24px;
+			font-weight: bold;
+			text-align: center;
+			display: block;
+			box-sizing: border-box;
+			background-color: var(--highlight_color);
+			color: var(--highlight_text_color);
+			border-radius: 30px;
+			padding: 5px;
+			margin-right: 10px;
+			width: 34px;
+			height: 34px;
+			float: left;
+		}
+		.instruction_text {
+			margin: 5px;
+			font-size: 24px;
+			display: block;
+			box-sizing: border-box;
+		}
+		.social_button {
+			margin: 5px;
+		}
+		.social_button > img, .social_button > svg {
+			width: 40px;
+			height: 40px;
+			margin: 5px 15px;
+		}
+		</style>
 	</head>
 	<body>
 		{{template "page_top" .}}
@@ -11,21 +49,67 @@
 		<img id="header_image" class="header_image" src="/res/img/header_2019.png" alt="Header image"/>
 		<br/>
 		<div class="page_content">
+			<h1>How to share files with pixeldrain</h1>
+			<div id="instruction_1" class="instruction_highlight"><div class="limit_width">
+				<span class="big_number">1</span><span class="instruction_text">Select files to upload</span>
+				You can also drop files anywhere on this page from your file
+				manager
+			</div></div>
 			<input id="file_input_field" type="file" name="file" multiple="multiple"/>
 			<button id="select_file_button" class="big_button button_highlight">Upload Files</button>
 			<button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button>
 			<br/>
 			<p>
 				By uploading files to Pixeldrain you accept that a cookie will
-				be placed in your web browser. More information on the <a
-				href="/about">about</a> page
+				be placed in your web browser. More information on the
+				<a href="/about">about</a> page
 			<p>
-
+			<div id="instruction_2" class="instruction_highlight" style="display: none">
+				<div class="limit_width">
+					<span class="big_number">2</span><span class="instruction_text">Wait for the files to finish uploading</span>
+				</div>
+			</div>
 			<div id="uploads_queue"></div>
-			<br/>
-			<button id="btn_create_list">Create list with uploaded files</button>
-			<button id="btn_copy_links">Copy links to clipboard</button>
-			<button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
+
+			<div id="instruction_3" class="instruction_highlight" style="display: none">
+				<div class="limit_width"><span class="big_number">3</span><span class="instruction_text">Share the files</span></div>
+			</div>
+			<div id="instruction_3_after" style="display: none">
+				<div id="navigator_share_button" style="display: inline-block">
+					<button class="social_button" onclick="shareButton()">
+						{{template `share.svg` .}}<br/>Share
+					</button>
+				</div>
+				<button id="btn_copy_link" class="social_button" style="display: inline-block" onclick="copyLink()">
+					{{template `copy.svg` .}}<br/><span>Copy link</span>
+				</button>
+				<button id="btn_open_link" class="social_button" style="display: inline-block" onclick="openLink()">
+					{{template `open_in_new.svg` .}}<br/><span>Open link</span>
+				</button>
+				<div id="social_buttons" style="display: inline-block">
+					<button class="social_button" onclick="window.open('mailto:please@set.address?subject=File%20on%20pixeldrain&body=' + shareLink);">
+						{{template `email.svg` .}}<br/>E-Mail
+					</button>
+					<button class="social_button" onclick="window.open('https://twitter.com/share?url=' + shareLink);">
+						{{template `twitter.svg` .}}<br/>Twitter
+					</button>
+					<button class="social_button" onclick="window.open('http://www.facebook.com/sharer.php?u=' + shareLink);">
+						{{template `facebook.svg` .}}<br/>Facebook
+					</button>
+					<button class="social_button" onclick="window.open('https://www.reddit.com/submit?url=' + shareLink);">
+						{{template `reddit.svg` .}}<br/>Reddit
+					</button>
+					<button class="social_button" onclick="window.open('http://www.tumblr.com/share/link?url=' + shareLink);">
+						{{template `tumblr.svg` .}}<br/>Tumblr
+					</button>
+				</div>
+				<br/>
+				<button id="btn_create_list">Create list with uploaded files</button>
+				<button id="btn_copy_links">Copy all links to clipboard</button>
+				<button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
+				<br/>
+				<div id="created_lists"></div>
+			</div>

 			<br/>
 			<div class="limit_width">
@@ -68,6 +152,7 @@
 		var apiEndpoint = '{{.APIEndpoint}}';
 		var API_URL = "/api";
 		{{template "home.js"}}
+		{{template "home_plain.js"}}
 		</script>

 		{{template "analytics"}}
--- a/res/template/paste.html
+++ b/res/template/paste.html
@@ -45,7 +45,7 @@
 	<body>
 		<div id="toolbar">
 			<button class="toolbar_button button_full_width" onClick="uploadText();">
-				<img src="{{template `upload_small.png`}}" alt="Start Upload"/>
+				{{template `upload.svg` .}}
 				<span>Upload</span>
 			</button>
 			<a href="/" class="button toolbar_button button_full_width">