Embed resources into templates

res/static/script/ListNavigator.js

@@ -1,229 +0,0 @@
-/* global Viewer */
-
-var ListNavigator = {
-	length: 0,
-	position: 0,
-	data: [],
-	history: [],
-	shuffle: false,
-
-	nextItem: function(){
-		if(!Viewer.isList){
-			return;
-		}
-		if(this.shuffle){
-			this.randItem();
-			return;
-		}
-
-		if(this.position >= this.length){
-			this.position = 0;
-		}else{
-			this.position++;
-		}
-
-		this.setItem(this.position);
-	},
-
-	previousItem: function(){
-		if(!Viewer.isList){
-			return;
-		}
-
-		if(this.position === 0){
-			this.position = this.length - 1;
-		}else{
-			this.position--;
-		}
-
-		this.setItem(this.position);
-	},
-
-	randItem: function(){
-		if(!Viewer.isList){
-			return;
-		}
-
-		// Avoid viewing the same file multiple times
-		var rand;
-		do {
-			rand = Math.round(Math.random() * this.length);
-			console.log("rand is " + rand);
-		} while(this.inHistory(rand));
-
-		this.setItem(rand);
-	},
-
-	setItem: function(index){
-		if(index >= this.length){
-			this.position = 0;
-		}else{
-			this.position = index;
-		}
-
-		// Set the URL hash
-		location.hash = "item=" + this.position;
-		Viewer.setFile(this.data[this.position]);
-
-		this.addToHistory(index);
-
-		$("#list_navigator").find("*").removeClass("file_button_selected");
-		var selectedItem = $("#list_navigator div").eq(this.position);
-		selectedItem.addClass("file_button_selected");
-		var itemWidth = selectedItem.outerWidth(true);
-
-		// This centers the scroll bar exactly on the selected item
-		$("#list_navigator").animate(
-			{scrollLeft: ((this.position * itemWidth) + (itemWidth / 2)) - ($("#list_navigator").width() / 2)},
-			{duration: 1000, queue: false}
-		);
-
-		this.loadThumbnails(index);
-	},
-
-	addToHistory: function(index){
-		if(this.history.length >= (this.length - 6)){
-			this.history.shift();
-		}
-
-		this.history.push(index);
-	},
-
-	inHistory: function(index){
-		var i = $.inArray(index, this.history); // Returns -1 when the item is not found
-
-		return (i !== -1); // Return false when it's not in the array
-	},
-
-	toggleShuffle: function(){
-		this.shuffle = !this.shuffle; // :P
-
-		if(this.shuffle){
-			$("#btnShuffle > span").html(" Shuffle ☑"); // Check icon
-			$("#btnShuffle").addClass("button_highlight");
-		}else{
-			$("#btnShuffle > span").html(" Shuffle ☐"); // Empty checkbox
-			$("#btnShuffle").removeClass("button_highlight");
-		}
-	},
-
-	loadThumbnails: function(index){
-		var startPos = +index - 50;
-		var endPos = +index + 50;
-		// fyi, the + is to let javascript know it's actually a number instead of a string
-
-		if(startPos < 0){
-			startPos = 0;
-		}
-
-		if(endPos >= this.length){
-			endPos = this.length - 1;
-		}
-		console.log(endPos);
-
-		var navigatorItems = document.getElementById("list_navigator").children
-
-		for (i = startPos; i <= endPos; i++){
-			if (navigatorItems[i].innerHTML.includes("list_item_thumbnail")) {
-				continue; // Thumbnail already loaded
-			}
-
-			var thumb = "/api/file/" + this.data[i].id + "/thumbnail?width=48&height=48";
-			var name = this.data[i].name;
-
-			var itemHtml = "<img src=\"" + thumb + "\" "
-				+ "class=\"list_item_thumbnail\" alt=\"" + escapeHTML(name) + "\"/>"
-				+ escapeHTML(name);
-
-			navigatorItems[i].innerHTML = itemHtml;
-		}
-	},
-
-	init: function(data){
-		this.data = data;
-		this.length = data.length;
-
-		var listHTML = "";
-		data.forEach(function(item, i){
-			var filename;
-			if(item.name !== "null"){
-				filename = item.name;
-			}else{
-				filename = "Removed File";
-			}
-
-			listHTML += "<div class=\"file_button list_item\" "
-				+ "onClick=\"ListNavigator.setItem('" + i + "')\">"
-				+ escapeHTML(filename) + "<br>"
-				+ "</div>";
-		});
-		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", "/res/img/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", "/res/img/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);
-
-		// Make the navigator visible
-		document.getElementById("list_navigator").style.display = "inline-block";
-
-		// Skip to the file defined in the link hash
-		if(Number.isInteger(parseInt(getHashValue("item")))){
-			this.setItem(parseInt(getHashValue("item")));
-		}else{
-			this.setItem(0);
-		}
-	}
-};
-
-
-// Misc function, don't really know where else to put it
-function getHashValue(key) {
-	var matches = location.hash.match(new RegExp(key + '=([^&]*)'));
-	return matches ? matches[1] : null;
-}

res/static/script/Toolbar.js

@@ -1,343 +0,0 @@
-/*
- * Time for a more Java-like approach.
- *
- *  Feel free to use this of course
- *
- *  Made by Fornax
- */
-
-/* global Viewer */
-
-var Toolbar = {
-	visible: false,
-	toggle: function () {
-		if (this.visible) {
-			if (Sharebar.visible) {
-				Sharebar.toggle();
-			}
-
-			document.getElementById("toolbar").style.left = "-8em";
-			document.getElementById("filepreview").style.left = "0px";
-			document.getElementById("button_toggle_toolbar").classList.remove("button_highlight");
-
-			this.visible = false;
-		} else {
-			document.getElementById("toolbar").style.left = "0px";
-			document.getElementById("filepreview").style.left = "8em";
-			document.getElementById("button_toggle_toolbar").classList.add("button_highlight");
-
-			this.visible = true;
-		}
-	},
-	download: function () {
-		var triggerDL = function(){
-			document.getElementById("download_frame").src = "/api/file/" + Viewer.currentFile + "?download";
-		}
-
-		if (captchaKey === "a"){
-			// If the server doesn't support captcha there's no use in checking
-			// availability
-			triggerDL();
-			return;
-		}
-
-		$.getJSON(
-			apiEndpoint + "/file/" + Viewer.currentFile + "/availability"
-		).done(function(data){
-			if(data.success === true){
-				// Downloading is allowed, start the download
-				triggerDL();
-			}
-		}).fail(function(data){
-			if(data.responseJSON.success === false) {
-				var popupDiv = document.getElementById("captcha_popup");
-				var popupTitle = document.getElementById("captcha_popup_title");
-				var popupContent = document.getElementById("captcha_popup_content");
-				var popupCaptcha = document.getElementById("captcha_popup_captcha");
-
-				if(data.responseJSON.value === "file_rate_limited_captcha_required") {
-					popupTitle.innerText = "Rate limiting enabled!";
-					popupContent.innerText = "This file is using a suspicious "+
-						"amount of bandwidth relative to its popularity. To "+
-						"continue downloading this file you will have to "+
-						"prove that you're a human first.";
-				}else if(data.responseJSON.value === "virus_detected_captcha_required"){
-					popupTitle.innerText = "Malware warning!";
-					popupContent.innerText = "According to our scanning "+
-						"systems this file may contain a virus  of type '"+
-						data.responseJSON.extra+"'. You can continue "+
-						"downloading this file at your own risk, but you will "+
-						"have to prove that you're a human first.";
-				}
-
-				// Load the recaptcha script with a load function
-				$.getScript("https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit");
-
-				popupDiv.style.opacity = "1";
-				popupDiv.style.visibility = "visible";
-			}else{
-				// No JSON, try download anyway
-				triggerDL();
-			}
-		});
-	},
-	downloadList: function(){
-		if(!Viewer.isList){
-			return;
-		}
-		document.getElementById("download_frame").src = "/api/list/" + Viewer.listId + "/zip";
-	},
-	copyUrl: function () {
-		if(copyText(window.location.href)) {
-			console.log('Text copied');
-			$("#btnCopy>span").text("Copied!");
-			document.getElementById("btnCopy").classList.add("button_highlight")
-		} else {
-			console.log('Copying not supported');
-			$("#btnCopy>span").text("Error!");
-			alert("Your browser does not support copying text.");
-		}
-
-		// Return to normal
-		setTimeout(function(){
-			$("#btnCopy>span").text("Copy");
-			document.getElementById("btnCopy").classList.remove("button_highlight")
-		}, 60000);
-	},
-	setStats: function(views, downloads){
-		document.getElementById("stat_views").innerText = views
-		document.getElementById("stat_downloads").innerText = Math.round(downloads*10)/10;
-	}
-};
-
-
-var Sharebar = {
-	visible: false,
-
-	toggle: function(){
-		if (navigator.share) {
-			navigator.share({
-				title: Viewer.title,
-				text: "Download " + Viewer.title + " here",
-				url: window.location.href
-			});
-			return;
-		}
-
-		if (!Toolbar.visible){
-			Toolbar.toggle();
-		}
-
-		if(this.visible){
-			document.getElementById("sharebar").style.left = "-8em";
-			document.getElementById("btnShare").classList.remove("button_highlight")
-			this.visible = false;
-		}else{
-			document.getElementById("sharebar").style.left = "8em";
-			document.getElementById("btnShare").classList.add("button_highlight")
-			this.visible = true;
-		}
-	}
-};
-
-function copyText(text) {
-	// Create a textarea to copy the text from
-	var ta = document.createElement("textarea");
-	ta.setAttribute("readonly", "readonly")
-	ta.style.position = "absolute";
-	ta.style.left = "-9999px";
-	ta.value = text; // Put the text in the textarea
-
-	// Add the textarea to the DOM so it can be seleted by the user
-	document.body.appendChild(ta);
-	ta.select(); // Select the contents of the textarea
-	var success = document.execCommand("copy"); // Copy the selected text
-	document.body.removeChild(ta); // Remove the textarea
-	return success;
-}
-
-function loadCaptcha(){
-	grecaptcha.render("captcha_popup_captcha", {
-		sitekey: captchaKey,
-		theme: "dark",
-		callback: function(token){
-			document.getElementById("download_frame").src = "/api/file/" + Viewer.currentFile +
-				"?download&recaptcha_response="+token;
-
-			setTimeout(function(){
-				var popupDiv = document.getElementById("captcha_popup");
-				popupDiv.style.opacity = "0";
-				popupDiv.style.visibility = "hidden";
-			}, 1000)
-		}
-	});
-}
-
-var DetailsWindow = {
-	visible:       false,
-	fileID:        "",
-	graph:         0,
-	popupDiv:      document.getElementById("details_popup"),
-	detailsButton: document.getElementById("btnDetails"),
-	toggle: function () {
-		if (this.visible) {
-			this.popupDiv.style.opacity = "0"
-			this.popupDiv.style.visibility = "hidden"
-			this.detailsButton.classList.remove("button_highlight")
-			this.visible = false;
-		} else {
-			this.popupDiv.style.opacity = "1"
-			this.popupDiv.style.visibility = "visible"
-			this.detailsButton.classList.add("button_highlight")
-			this.visible = true;
-
-			// This is a workaround for a chrome bug which makes it so hidden
-			// windows can't be scrolled after they are shown
-			this.popupDiv.focus();
-
-			if (this.graph === 0) {
-				this.renderGraph();
-			}
-			this.updateGraph(this.fileID);
-		}
-	},
-	setDetails: function (file) {
-		var that = this;
-		if (Viewer.isList) {
-			// Lists give incomplete file information, so we have to request
-			// more details in the background. File descriptions only exist in
-			// lists, so for that we use the data provided in the page source
-			$.ajax({
-				dataType: "json",
-				url: apiEndpoint + "/file/" + file.id + "/info",
-				success: function(data){
-					that.fileID = data.id;
-					$("#info_file_details").html(
-						"<table>"
-						+ "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>"
-						+ "<tr><td>URL<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
-						+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
-						+ "<tr><td>ID<td><td>" + data.id + "</td></tr>"
-						+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.size + "</td></tr>"
-						+ "<tr><td>Bandwidth<td><td class=\"bytecounter\">" + data.bandwidth_used + "</td></tr>"
-						+ "<tr><td>Upload Date<td><td>" + data.date_upload + "</td></tr>"
-						+ "<tr><td>Description<td><td>" + escapeHTML(file.description) + "</td></tr>"
-						+ "</table>"
-					);
-					Toolbar.setStats(data.views, data.bandwidth_used/data.size);
-					if(that.visible) {
-						that.updateGraph(that.fileID);
-					}
-				}
-			});
-		} else {
-			this.fileID = file.id;
-			$("#info_file_details").html(
-				"<table>"
-				+ "<tr><td>Name<td><td>" + escapeHTML(file.name) + "</td></tr>"
-				+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
-				+ "<tr><td>ID<td><td>" + file.id + "</td></tr>"
-				+ "<tr><td>Size<td><td class=\"bytecounter\">" + file.size + "</td></tr>"
-				+ "<tr><td>Bandwidth<td><td class=\"bytecounter\">" + file.bandwidth_used + "</td></tr>"
-				+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
-				+ "</table>"
-			);
-			Toolbar.setStats(file.views, file.bandwidth_used/file.size);
-			if(this.visible) {
-				this.updateGraph(file.id);
-			}
-		}
-	},
-	updateGraph: function(fileID) {
-		var that = this;
-		console.log("updating graph "+fileID);
-		$.get(apiEndpoint+"/file/" + fileID + "/timeseries?interval=60?days=14", function(response){
-			console.log(response);
-			if (response.success) {
-				that.graph.data.labels = response.labels;
-				that.graph.data.datasets[0].data = response.downloads;
-				that.graph.data.datasets[1].data = response.views;
-				that.graph.update();
-			}
-		});
-	},
-	renderGraph: function() {
-		console.log("rendering graph");
-		Chart.defaults.global.defaultFontColor = "#b3b3b3";
-		Chart.defaults.global.defaultFontSize = 15;
-		Chart.defaults.global.defaultFontFamily = "Ubuntu";
-		Chart.defaults.global.aspectRatio = 2.5;
-		Chart.defaults.global.elements.point.radius = 0;
-		Chart.defaults.global.tooltips.mode = "index";
-		Chart.defaults.global.tooltips.axis = "x";
-		Chart.defaults.global.tooltips.intersect = false;
-		this.graph = new Chart(
-			document.getElementById('bandwidth_chart'),
-			{
-				type: 'line',
-				data: {
-					datasets: [
-						{
-							label: "Downloads",
-							backgroundColor: "rgba(64, 255, 64, .05)",
-							borderColor: "rgba(128, 255, 128, 1)",
-							borderWidth: 1.5,
-							lineTension: 0.1,
-							fill: true,
-							yAxisID: "y_bandwidth",
-						}, {
-							label: "Views",
-							backgroundColor: "rgba(64, 64, 255, .1)",
-							borderColor: "rgba(128, 128, 255, 1)",
-							borderWidth: 1.5,
-							lineTension: 0.1,
-							fill: true,
-							yAxisID: "y_views",
-						}
-					]
-				},
-				options: {
-					scales: {
-						yAxes: [
-							{
-								type: "linear",
-								display: true,
-								position: "left",
-								id: "y_bandwidth",
-								scaleLabel: {
-									display: true,
-									labelString: "Downloads"
-								},
-								gridLines: {
-									color: "rgba(100, 255, 100, .1)"
-								}
-							}, {
-								type: "linear",
-								display: true,
-								position: "right",
-								id: "y_views",
-								scaleLabel: {
-									display: true,
-									labelString: "Views"
-								},
-								gridLines: {
-									color: "rgba(128, 128, 255, .2)"
-								}
-							}
-						],
-						xAxes: [
-							{
-								ticks: {
-									maxRotation: 20
-								},
-								gridLines: {
-									display: false
-								}
-							}
-						]
-					}
-				}
-			}
-		);
-	}
-};

res/static/script/Viewer.js

@@ -1,106 +0,0 @@
-/* global ListNavigator, Toolbar, DetailsWindow */
-
-var Viewer = {
-	currentFile: "",
-	title: "", // Contains either the file name or list title
-	listId: "",
-	isList: false,
-	isFile: false,
-	initialized: false,
-
-	init: function(type, data){
-		if(this.initialized){
-			return;
-		}
-
-		// On small screens the toolbar takes too much space, so it collapses automatically
-		if($("#filepreview").width() > 500 && !Toolbar.visible){
-			Toolbar.toggle();
-		}
-
-		// The close button only works if the window has an opener. So we hide
-		// the button if it does not
-		if (window.opener === null && window.history.length !== 1) {
-			$("#button_close_file_viewer").remove();
-		}
-
-		if(type === "file"){
-			this.isFile = true;
-			this.currentFile = data.id;
-			this.title = data.name;
-			this.setFile(data);
-		} else if (type === "list") {
-			this.isList = true;
-			this.listId = data.id;
-			this.title = data.title;
-			ListNavigator.init(data.data);
-		}
-
-		this.initialized = true;
-	},
-	setFile: function(file){
-		this.currentFile = file.id;
-		var title = "";
-		if (this.isList) {
-			document.getElementById("file_viewer_headerbar_title").style.lineHeight = "1em";
-			document.getElementById("file_viewer_list_title").innerText = this.title;
-			document.getElementById("file_viewer_file_title").innerText = file.name;
-			document.title = this.title + " ~ " + file.name + " ~ PixelDrain";
-		} else {
-			document.getElementById("file_viewer_file_title").innerText = file.name;
-			document.title = file.name + " ~ PixelDrain";
-		}
-
-		$.get("/u/" + file.id + "/preview", function(response){
-			$("#filepreview").html(response);
-		});
-
-		DetailsWindow.setDetails(file);
-	}
-};
-
-// Against XSS attacks
-function escapeHTML(str) {
-    return String(str)
-		.replace(/&/g, '&')
-		.replace(/</g, '&lt;')
-		.replace(/>/g, '&gt;')
-		.replace(/"/g, '&quot;');
-}
-
-// Register keyboard shortcuts
-document.addEventListener("keydown", function(event){
-	if (event.ctrlKey || event.altKey) {
-		return // prevent custom shortcuts from interfering with system shortcuts
-	}
-
-	switch (event.which) {
-	case 65: // A or left arrow key go to previous file
-	case 37:
-		ListNavigator.previousItem();
-		break;
-	case 68: // D or right arrow key go to next file
-	case 39:
-		ListNavigator.nextItem();
-		break;
-	case 83:
-		if (event.shiftKey) {
-			Toolbar.downloadList(); // SHIFT + S downloads all files in list
-		} else {
-			Toolbar.download(); // S to download the current file
-		}
-		break;
-	case 82: // R to toggle list shuffle
-		ListNavigator.toggleShuffle();
-		break;
-	case 67: // C to copy to clipboard
-		Toolbar.copyUrl();
-		break;
-	case 73: // I to open the details window
-		DetailsWindow.toggle();
-		break;
-	case 81: // Q to close the window
-		window.close();
-		break;
-	}
-});

res/static/script/compiled/README

@@ -1,4 +0,0 @@
-All files in this directory are compiled typescript files. You can find the
-sources in /res/typescript.
-
-Have fun typing!

res/static/script/compiled/home.js

@@ -89,39 +89,68 @@ function createList(title, anonymous) {
             "id": finishedUploads[i].id
         });
     }
-    $.ajax({
-        url: "/api/list",
-        contentType: "application/json",
-        method: "POST",
-        data: JSON.stringify(postData),
-        dataType: "json",
-        success: function (response) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", apiEndpoint + "/list");
+    xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState !== 4) {
+            return;
+        }
+        if (xhr.status == 200 || xhr.status == 0) {
+            // Request is a success
             var resultString = "<div class=\"file_button\">"
-                + '<img src="' + apiEndpoint + '/list/' + response.id + '/thumbnail"/>'
+                + '<img src="' + apiEndpoint + '/list/' + xhr.response.id + '/thumbnail"/>'
                 + "List creation finished!<br/>"
                 + title + "<br/>"
-                + "<a href=\"/l/" + response.id + "\" target=\"_blank\">" + window.location.hostname + "/l/" + response.id + "</a>"
+                + "<a href=\"/l/" + xhr.response.id + "\" target=\"_blank\">" + window.location.hostname + "/l/" + xhr.response.id + "</a>"
                 + "</div>";
-            $('#uploads_queue').append($(resultString).hide().fadeIn('slow').css("display", ""));
-            $("#uploads_queue").animate({
-                scrollTop: $("#uploads_queue").prop("scrollHeight")
-            }, 1000);
-            window.open('/l/' + response.id, '_blank');
-        },
-        error: function (xhr, status, error) {
-            console.log("xhr:");
-            console.log(xhr);
-            console.log("status:");
-            console.log(status);
-            console.log("error:");
-            console.log(error);
+            document.getElementById("uploads_queue").append(resultString);
+            window.open('/l/' + xhr.response.id, '_blank');
+        }
+        else {
+            console.log("status: " + xhr.status + " response: " + xhr.response);
             var resultString = "<div class=\"file_button\">List creation failed<br/>"
                 + "The server responded with this: <br/>"
-                + xhr.responseJSON.message
+                + xhr.response.message
                 + "</div>";
-            $('#uploads_queue').append($(resultString).hide().fadeIn('slow').css("display", ""));
+            document.getElementById("uploads_queue").append(resultString);
         }
-    });
+    };
+    xhr.send(JSON.stringify(postData));
+    // $.ajax({
+    // 	url: "/api/list",
+    // 	contentType: "application/json",
+    // 	method: "POST",
+    // 	data: JSON.stringify(postData),
+    // 	dataType: "json",
+    // 	success: function(response) {
+    // 		var resultString = "<div class=\"file_button\">"
+    // 			+ '<img src="'+apiEndpoint+'/list/'+response.id+'/thumbnail"/>'
+    // 			+ "List creation finished!<br/>"
+    // 			+ title + "<br/>"
+    // 			+ "<a href=\"/l/" + response.id + "\" target=\"_blank\">"+window.location.hostname+"/l/" + response.id + "</a>"
+    // 			+ "</div>";
+    // 		$('#uploads_queue').append(
+    // 			$(resultString).hide().fadeIn('slow').css("display", "")
+    // 		);
+    // 		window.open('/l/'+response.id, '_blank');
+    // 	},
+    // 	error: function(xhr, status, error) {
+    // 		console.log("xhr:");
+    // 		console.log(xhr);
+    // 		console.log("status:");
+    // 		console.log(status);
+    // 		console.log("error:");
+    // 		console.log(error);
+    // 		var resultString = "<div class=\"file_button\">List creation failed<br/>"
+    // 			+ "The server responded with this: <br/>"
+    // 			+ xhr.responseJSON.message
+    // 			+ "</div>";
+    // 		$('#uploads_queue').append(
+    // 			$(resultString).hide().fadeIn('slow').css("display", "")
+    // 		);
+    // 	}
+    // });
 }
 // Form upload handlers
 // Relay click event to hidden file field
@@ -319,39 +348,35 @@ var UploadWorker = /** @class */ (function () {
     };
     UploadWorker.prototype.upload = function (file) {
         console.debug("Starting upload of " + file.name);
+        var that = this; // jquery changes the definiton of "this"
         var formData = new FormData();
         formData.append("name", file.name);
         formData.append('file', file.file);
-        var that = this; // jquery changes the definiton of "this"
-        $.ajax({
-            type: 'POST',
-            url: apiEndpoint + "/file",
-            data: formData,
-            timeout: 21600000,
-            cache: false,
-            async: true,
-            crossDomain: false,
-            contentType: false,
-            processData: false,
-            xhr: function () {
-                var xhr = new XMLHttpRequest();
-                xhr.upload.addEventListener("progress", function (evt) {
-                    if (evt.lengthComputable) {
-                        file.onProgress(evt.loaded / evt.total);
-                    }
-                }, false);
-                return xhr;
-            },
-            success: function (data) {
-                file.onFinished(data.id);
-                that.setHistoryCookie(data.id);
-                console.log("Done: " + data.id);
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", apiEndpoint + "/file");
+        xhr.timeout = 21600000; // 6 hours, to account for slow connections
+        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
+        // Update progess bar on progress
+        xhr.onprogress = function (evt) {
+            if (evt.lengthComputable) {
+                file.onProgress(evt.loaded / evt.total);
+            }
+        };
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState !== 4) {
+                return;
+            }
+            if (xhr.status == 200 || xhr.status == 0) {
+                // Request is a success
+                file.onFinished(xhr.response.id);
+                that.setHistoryCookie(xhr.response.id);
+                console.log("Done: " + xhr.response.id);
                 that.newFile(); // Continue uploading on this thread
-            },
-            error: function (xhr, status, error) {
-                console.log("status: " + status + " error: " + error);
+            }
+            else {
+                console.log("status: " + xhr.status + " response: " + xhr.response);
                 if (that.tries === 3) {
-                    file.onFailure(status, error);
+                    file.onFailure(xhr.response.value, xhr.response.message);
                     setTimeout(function () { that.newFile(); }, 2000); // Try to continue
                     return; // Upload failed
                 }
@@ -359,7 +384,45 @@ var UploadWorker = /** @class */ (function () {
                 that.tries++;
                 setTimeout(function () { that.upload(file); }, that.tries * 3000);
             }
-        });
+        };
+        xhr.send(formData);
+        // $.ajax({
+        // 	type: 'POST',
+        // 	url: apiEndpoint+"/file",
+        // 	data: formData,
+        // 	timeout: 21600000, // 6 hours, to account for slow connections
+        // 	cache: false,
+        // 	async: true,
+        // 	crossDomain: false,
+        // 	contentType: false,
+        // 	processData: false,
+        // 	xhr: function () {
+        // 		var xhr = new XMLHttpRequest();
+        // 		xhr.upload.addEventListener("progress", function (evt) {
+        // 			if (evt.lengthComputable) {
+        // 				file.onProgress(evt.loaded / evt.total)
+        // 			}
+        // 		}, false);
+        // 		return xhr;
+        // 	},
+        // 	success: function (data) {
+        // 		file.onFinished(data.id)
+        // 		that.setHistoryCookie(data.id)
+        // 		console.log("Done: " + data.id)
+        // 		that.newFile() // Continue uploading on this thread
+        // 	},
+        // 	error: function (xhr, status, error){
+        // 		console.log("status: "+status+" error: "+error)
+        // 		if (that.tries === 3) {
+        // 			file.onFailure(status, error)
+        // 			setTimeout(function(){that.newFile()}, 2000) // Try to continue
+        // 			return; // Upload failed
+        // 		}
+        // 		// Try again
+        // 		that.tries++
+        // 		setTimeout(function(){that.upload(file)}, that.tries*3000)
+        // 	}
+        // });
     };
     UploadWorker.prototype.setHistoryCookie = function (id) {
         // Make sure the user is not logged in, for privacy. This keeps the

res/static/script/compiled/textupload.js

@@ -1,187 +0,0 @@
-var uploader = null;
-var TextUpload = /** @class */ (function () {
-    function TextUpload(file, name) {
-        this.file = file;
-        this.name = name;
-    }
-    TextUpload.prototype.onProgress = function (progress) { return; };
-    TextUpload.prototype.onFinished = function (id) {
-        setTimeout(window.location.href = "/u/" + id, 100);
-    };
-    TextUpload.prototype.onFailure = function (response, error) {
-        alert("File upload failed! The server told us this: " + response);
-    };
-    return TextUpload;
-}());
-function uploadText() {
-    var text = $("#textarea").val();
-    var blob = new Blob([text], { type: "text/plain" });
-    var filename = prompt("What do you want to call this piece of textual art?\n\n"
-        + "Please add your own file extension, if you want.", "Pixeldrain_Text_File.txt");
-    if (filename === null) {
-        return;
-    }
-    if (uploader === null) {
-        uploader = new UploadManager();
-    }
-    uploader.uploadFile(new TextUpload(blob, filename));
-}
-/**
- * Prevent the Tab key from moving the cursor outside of the text area
- */
-$(document).delegate('#textarea', 'keydown', function (e) {
-    var keyCode = e.keyCode || e.which;
-    if (keyCode === 9) {
-        e.preventDefault();
-        var start = $(this).get(0).selectionStart;
-        var end = $(this).get(0).selectionEnd;
-        // set textarea value to: text before caret + tab + text after caret
-        $(this).val($(this).val().substring(0, start)
-            + "\t"
-            + $(this).val().substring(end));
-        // put caret at right position again
-        $(this).get(0).selectionStart =
-            $(this).get(0).selectionEnd = start + 1;
-    }
-});
-// Upload the file when ctrl + s is pressed
-$(document).bind('keydown', function (e) {
-    if (e.ctrlKey && (e.which === 83)) {
-        e.preventDefault();
-        uploadText();
-        return false;
-    }
-});
-var Cookie;
-(function (Cookie) {
-    function read(name) {
-        var result = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie);
-        return result ? result[1] : null;
-    }
-    Cookie.read = read;
-    function write(name, value, days) {
-        if (!days) {
-            days = 365 * 20;
-        }
-        var date = new Date();
-        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-        var expires = "; expires=" + date.toUTCString();
-        document.cookie = name + "=" + value + expires + "; path=/";
-    }
-    Cookie.write = write;
-    function remove(name) {
-        write(name, "", -1);
-    }
-    Cookie.remove = remove;
-})(Cookie || (Cookie = {}));
-var UploadManager = /** @class */ (function () {
-    function UploadManager() {
-        this.uploadQueue = new Array();
-        this.uploadThreads = new Array();
-        this.maxThreads = 3;
-    }
-    UploadManager.prototype.uploadFile = function (file) {
-        console.debug("Adding upload to queue");
-        this.uploadQueue.push(file);
-        if (this.uploadThreads.length < this.maxThreads) {
-            console.debug("Starting upload thread");
-            var thread_1 = new UploadWorker(this);
-            this.uploadThreads.push(thread_1);
-            setTimeout(function () { thread_1.start(); }, 0); // Start a new upload thread
-        }
-        else {
-            for (var i = 0; i < this.uploadThreads.length; i++) {
-                this.uploadThreads[i].start();
-            }
-        }
-    };
-    UploadManager.prototype.grabFile = function () {
-        if (this.uploadQueue.length > 0) {
-            return this.uploadQueue.shift();
-        }
-        else {
-            return undefined;
-        }
-    };
-    return UploadManager;
-}());
-var UploadWorker = /** @class */ (function () {
-    function UploadWorker(manager) {
-        this.tries = 0;
-        this.uploading = false;
-        this.manager = manager;
-    }
-    UploadWorker.prototype.start = function () {
-        if (!this.uploading) {
-            this.newFile();
-        }
-    };
-    UploadWorker.prototype.newFile = function () {
-        var file = this.manager.grabFile();
-        if (file === undefined) {
-            this.uploading = false;
-            console.debug("No files left in queue");
-            return; // Stop the thread
-        }
-        this.uploading = true;
-        this.tries = 0;
-        this.upload(file);
-    };
-    UploadWorker.prototype.upload = function (file) {
-        console.debug("Starting upload of " + file.name);
-        var formData = new FormData();
-        formData.append('file', file.file);
-        formData.append("name", file.name);
-        var that = this; // jquery changes the definiton of "this"
-        $.ajax({
-            url: "/api/file",
-            data: formData,
-            cache: false,
-            crossDomain: false,
-            contentType: false,
-            processData: false,
-            type: 'POST',
-            xhr: function () {
-                var xhr = new XMLHttpRequest();
-                xhr.upload.addEventListener("progress", function (evt) {
-                    if (evt.lengthComputable) {
-                        file.onProgress(evt.loaded / evt.total);
-                    }
-                }, false);
-                return xhr;
-            },
-            success: function (data) {
-                file.onFinished(data.id);
-                that.setHistoryCookie(data.id);
-                console.log("Done: " + data.id);
-                that.newFile(); // Continue uploading on this thread
-            },
-            error: function (xhr, status, error) {
-                console.log("status: " + status + " error: " + error);
-                if (that.tries === 3) {
-                    alert("Upload failed: " + status);
-                    file.onFailure(status, error);
-                    setTimeout(function () { that.newFile(); }, 2000); // Try to continue
-                    return; // Upload failed
-                }
-                // Try again
-                that.tries++;
-                setTimeout(function () { that.upload(file); }, that.tries * 3000);
-            }
-        });
-    };
-    UploadWorker.prototype.setHistoryCookie = function (id) {
-        var uc = Cookie.read("pduploads");
-        // First upload in this browser
-        if (uc === null) {
-            Cookie.write("pduploads", id + ".", undefined);
-            return;
-        }
-        if (uc.length > 2000) {
-            // Cookie is becoming too long, drop the oldest two files
-            uc = uc.substring(uc.indexOf(".") + 1).substring(uc.indexOf(".") + 1);
-        }
-        Cookie.write("pduploads", uc + id + ".", undefined);
-    };
-    return UploadWorker;
-}());

res/static/script/embedupload.css

@@ -1,22 +0,0 @@
-/* 
-    Created on : Oct 21, 2015, 1:15:03 PM
-    Author     : Fornax
-*/
-.uploadQueueSideBar{
-	
-}
-
-.uploadQueueToggleButton{
-	
-}
-
-.uploadNotification{
-	position: fixed;
-	background-color: #333;
-	border: 2px #555 outset;
-	
-	height: 100px;
-	width: 200px;
-	right: 10px;
-	bottom: 10px;
-}

res/static/script/embedupload.js

@@ -1,14 +0,0 @@
-/* 
- * Made by Fornax
- */
-
-$(document).ready(function () {
-	// Add the stylesheet
-	$("head").append('<link rel="stylesheet" type="text/css" href="/res/script/embedupload.css">');
-});
-
-var ModularUploader = {
-	doUpload: function(){
-		
-	}
-};

res/static/script/history.js

@@ -1,52 +0,0 @@
-var uploads;
-
-$(document).ready(function () {
-	var uploadString = $.cookie("pduploads");
-	uploadString = uploadString.slice(0, -1);
-	uploads = uploadString.split(".");
-
-	uploads.reverse();
-
-	var timeout = 250;
-	var itemcount = 0;
-	$.each(uploads, function (nr, id) {
-		setTimeout(function () {
-			$.ajax({
-				type: "GET",
-				dataType: "json",
-				url: apiEndpoint + "/file/" + id + "/info",
-				async: true,
-				success: function(data) {
-					historyAddItem(data);
-				},
-				error: function(data) {
-					historyAddItem(data.responseJSON);
-				}
-			});
-		}, timeout);
-
-		timeout = timeout + 100;
-		itemcount++;
-		if (itemcount > 1000) {
-			return false;
-		}
-	});
-});
-
-function historyAddItem(json) {
-	if(!json.success){return;}
-
-	var date = new Date(json.date_upload);
-
-	var uploadItem =  '<a href="/u/'+ json.id +'" target="_blank" class="file_button">'
-		+ '<img src="'+ apiEndpoint + json.thumbnail_href + '?width=80&height=80"'
-		+ "alt=\"" + json.name + "\" />"
-		+ '<span style="color: var(--highlight_color);">'+json.name+'</span>'
-		+ "<br/>"
-		+ date.getFullYear() + "-"
-		+ ("00" + (date.getMonth() + 1)).slice(-2) + "-"
-		+ ("00" + date.getDate()).slice(-2)
-		+ "</a>";
-
-	$("#uploadedFiles").append($(uploadItem).hide().fadeIn(500));
-}

res/static/script/openlist.js

@@ -1,25 +0,0 @@
-var listItems = new Array();
-
-function addToList(id, desc){
-	var listEntry = {id: id, desc: desc};
-
-	listItems.push(listEntry);
-}
-
-function openList(){
-    var arrayLength = listItems.length;
-    
-    var url = "/u/"
-	for (var i = 0; i < arrayLength; i++) {
-        if (i != 0) {
-            url = url + ","
-        }
-        url = url + listItems[i]["id"]
-    }
-    
-    window.open(url)
-}
-
-$("#btnOpenAsList").click(function (evt) {
-	openList();
-});

res/static/script/paste.js

@@ -1,107 +0,0 @@
-/**
- * Made by Fornax
- * Use if you need to
- */
-
-function uploadText() {
-	var text = $("#textarea").val();
-	if(!text.endsWith("\n")){
-		text += "\n";
-	}
-
-	var blob = new Blob([text], {type: "text/plain"});
-
-	startFileUpload(blob);
-}
-
-/*
- * Upload functions
- */
-function startFileUpload(blob) {
-	formData = new FormData();
-	formData.append('file', blob);
-
-	var filename = prompt("What do you want to call this piece of textual art?\n\n"
-		+ "Please add your own file extension, if you want.",
-		"Pixeldrain_Text_File.txt");
-	
-	if(filename === null){
-		return;
-	}
-	
-	formData.append("name", filename);
-
-	jQuery.ajax({
-		url: "/api/file",
-		data: formData,
-		cache: false,
-		crossDomain: true,
-		contentType: false,
-		processData: false,
-		type: 'POST',
-		success: function (data) {
-			fileUploadComplete(data);
-		}
-	});
-}
-
-function fileUploadComplete(json) {
-	if (json.success) {
-		setHistoryCookie(json.id)
-		setTimeout(window.location.href = "/u/" + json.id, 100);
-	} else {
-		alert("File upload failed! The server told us this: " + json.message);
-	}
-}
-
-function setHistoryCookie(id){
-	uc = Cookie.get("pduploads");
-
-	// First upload in this browser
-	if (uc === null) {
-		Cookie.set("pduploads", id + ".");
-		return;
-	}
-
-	if (uc.length > 2000){
-		// Cookie is becoming too long, drop the oldest two files
-		uc = uc.substring(
-			uc.indexOf(".") + 1
-		).substring(
-			uc.indexOf(".") + 1
-		);
-	}
-	
-	Cookie.set("pduploads", uc + id + ".");
-}
-
-/**
- * Prevent the Tab key from moving the cursor outside of the text area
- */
-$(document).delegate('#textarea', 'keydown', function (e) {
-	var keyCode = e.keyCode || e.which;
-
-	if (keyCode === 9) {
-		e.preventDefault();
-		var start = $(this).get(0).selectionStart;
-		var end = $(this).get(0).selectionEnd;
-
-		// set textarea value to: text before caret + tab + text after caret
-		$(this).val($(this).val().substring(0, start)
-			+ "\t"
-			+ $(this).val().substring(end));
-
-		// put caret at right position again
-		$(this).get(0).selectionStart =
-			$(this).get(0).selectionEnd = start + 1;
-	}
-});
-
-// Upload the file when ctrl + s is pressed
-$(document).bind('keydown', function (e) {
-	if (e.ctrlKey && (e.which === 83)) {
-		e.preventDefault();
-		uploadText();
-		return false;
-	}
-});

res/static/style/layout.css

@@ -1,506 +0,0 @@
-/*
-    Created on : Jun 3, 2015, 9:33:11 AM
-    Author     : Fornax
-*/
-
-:root {
-	--highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color);
-}
-
-/* Fonts */
-
-@font-face {
-	font-family: 'Ubuntu';
-	font-style: normal;
-	font-weight: 400;
-	font-display: fallback;
-    text-rendering: optimizeLegibility;
-	src:
-		local('Ubuntu'),
-		local('Ubuntu Regular'),
-		local('Ubuntu, Regular'),
-		local('Ubuntu-Regular'),
-		url(/res/misc/Ubuntu-R.ttf) format('truetype');
-}
-@font-face {
-	font-family: 'Lato Thin';
-	font-display: fallback;
-    font-style: normal;
-    font-weight: normal;
-    text-rendering: optimizeLegibility;
-	src:
-		local('Lato Thin'),
-		local('Lato, Thin'),
-		local('Lato-Thin'),
-		local('Lato Hairline'),
-		local('Lato, Hairline'),
-		local('Lato-Hairline'),
-		url(/res/misc/LatoLatin-Thin.ttf) format('truetype');
-}
-@font-face {
-	font-family: 'Lato';
-	font-display: fallback;
-    font-style: normal;
-    font-weight: normal;
-    text-rendering: optimizeLegibility;
-	src:
-		local('Lato Regular'),
-		local('Lato, Regular'),
-		local('Lato-Regular'),
-		url(/res/misc/Lato-Regular.ttf) format('truetype');
-}
-
-/* Page rendering configuration */
-html, body {
-	overflow-x: hidden;
-}
-body{
-	background-color: #0d0d0d; /* Fallback */
-	background-color: var(--body_color);
-	background-repeat: repeat;
-	font-family: 'Ubuntu';
-	margin: 0;
-	line-height: 1.5em;
-	color: #bfbfbf; /* Fallback */
-	color: var(--text_color);
-	padding: 0;
-}
-
-/* Page layout elements */
-.page_wrapper {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-}
-
-.button_toggle_navigation {
-	position: fixed;
-	backface-visibility: hidden;
-	z-index: 300;
-	top: 0;
-	left: 0;
-	padding: 10px 20px 15px 10px;
-	font-size: 2em;
-	margin: 0;
-	background: var(--input_color);
-	border-radius: 0;
-	border-bottom-right-radius: 90%;
-	box-shadow: 2px 2px 8px -3px var(--shadow_color);
-}
-.page_navigation {
-	position: fixed;
-	backface-visibility: hidden;
-	z-index: 100;
-	width: 250px;
-	height: 100%;
-	left: 0;
-	float: left;
-	background-color: var(--layer_1_color);
-	padding: 20px 0 0.5em 0;
-	box-sizing: border-box;
-	overflow-y: auto;
-	overflow-x: hidden;
-	text-align: left;
-	box-shadow: inset -10px 0px 10px -10px var(--shadow_color);
-	transition: left 0.5s;
-}
-.page_body {
-	position: absolute;
-	z-index: 200;
-	right: 0;
-	height: auto;
-	left: 250px;
-	min-width: 300px;
-	display: inline-block;
-	text-align: center; /* Center the header and body */
-	overflow-y: auto;
-	overflow-x: hidden;
-	z-index: 50;
-	transition: left 0.5s;
-	padding: 50px 0 50px 0;
-}
-@media (max-width: 600px) {
-	.page_navigation {
-		left: -250px;
-	}
-	.page_body {
-		left: 0;
-		width: 100%;
-	}
-}
-
-.page_body > .page_content {
-	position: relative;
-	display: inline-block;
-	width: 100%;
-	height: auto;
-	padding: 20px 0 20px 0;
-	background-color: var(--layer_2_color);
-	box-shadow: 1px 1px 20px 0 var(--shadow_color);
-	box-sizing: border-box;
-	clear: both;
-}
-.page_body > .page_content > .limit_width {
-	position: relative;
-	display: inline-block;
-	max-width: 1000px;
-	width: 100%;
-	height: auto;
-	padding: 0;
-	box-sizing: border-box;
-	text-align: left;
-	word-break: break-word;
-	clear: both;
-}
-.page_body > h1 {
-	text-shadow: 1px 1px 25px #000000;
-}
-
-/* Page contents */
-
-.header_image{
-	width: 100%;
-	max-width: 1200px;
-	margin-top: 30px;
-	margin-bottom: 30px;
-}
-
-.page_navigation a {
-	float: none;
-	display: block;
-	box-sizing: border-box;
-	color: #bfbfbf; /* Fallback */
-	color: var(--text_color);
-	text-align: center;
-	padding: 4px 6px;
-	margin: 0.3em 15px 0.3em 15px;
-	font-family: "Lato Thin", sans-serif;
-	font-weight: bold;
-	font-size: 1.5em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	transition: background-color 0.5s;
-	border-radius: 5px;
-}
-.page_navigation a:hover {
-	background-color: var(--input_color);
-	color: var(--input_text_color);
-	text-decoration: none;
-}
-
-.inset {
-	box-shadow: inset 1px 1px 20px 0 var(--shadow_color);
-}
-.checkers {
-	text-shadow: 0 0 20px #000000;
-	padding: 30px 10px 30px 10px;
-}
-
-.highlight_dark,
-.highlight_middle,
-.highlight_light,
-.highlight_headerbar,
-.highlight_green,
-.highlight_blue,
-.highlight_red,
-.highlight_1,
-.highlight_2,
-.highlight_3,
-.highlight_4 {
-	position: relative;
-	width: auto;
-	height: auto;
-	box-sizing: border-box;
-	overflow: hidden;
-	text-align: center;
-	padding: .5em;
-}
-.highlight_dark, .highlight_1 {
-	background-color: var(--layer_1_color);
-	box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);}
-.highlight_middle, .highlight_2 {
-	background-color: var(--layer_2_color);
-	box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);}
-.highlight_light, .highlight_3 {
-	background-color: var(--layer_3_color);
-	box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);}
-.highlight_headerbar, .highlight_4 {
-	background-color: var(--layer_4_color);
-	box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);}
-.highlight_green  {
-	background-color: rgba(0, 255, 0, 0.05);
-	border-color: #00d000;}
-.highlight_blue   {
-	background-color: rgba(32, 32, 255, 0.2);
-	border-color: rgb(54, 54, 255);}
-.highlight_red    {
-	background-color: rgba(255, 0, 0, 0.1);
-	border-color: #B00000;}
-
-.highlight_green,
-.highlight_blue,
-.highlight_red {
-	border-top-width: 1px;
-	border-top-style: solid;
-	border-bottom-width: 1px;
-	border-bottom-style: solid;
-}
-
-/* Common elements */
-
-h1, h2, h3, h4, h5, h6 {
-	line-height: 1em;
-	margin-left: 10px;
-	margin-right: 10px;
-}
-h1{font-size: 2em;    font-family: "Lato Thin";}
-h2{font-size: 1.75em; font-family: "Lato Thin";}
-h3{font-size: 1.5em;  font-family: "Lato Thin";}
-h4{font-size: 1.25em; font-family: "Lato";}
-h5{font-size: 1em;    font-family: "Lato";}
-h6{font-size: .75em;  font-family: "Lato";}
-h3, h2{border-bottom: 1px var(--layer_3_color_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
-
-p, .indent {
-	margin: 10px;
-}
-
-hr{
-	height: 1px;
-	border: none;
-	background-color: var(--input_color);
-	margin: 16px 16px 16px 16px;
-}
-
-::-webkit-scrollbar{
-	width: 1em;  /* for vertical scrollbars */
-	height: 1em; /* for horizontal scrollbars */
-}
-::-webkit-scrollbar-track {
-	background: var(--scrollbar_background_color);
-}
-::-webkit-scrollbar-thumb {
-	background-color: var(--scrollbar_foreground_color);
-	border-radius: 0.5em;
-	border: 0.22em solid var(--scrollbar_background_color);
-}
-::-webkit-scrollbar-thumb:hover {
-	background-color: var(--scrollbar_hover_color);
-}
-::-webkit-scrollbar-corner{background: var(--scrollbar_background_color);}
-
-a       {color: var(--highlight_color); text-decoration: none;}
-a:hover {color: var(--highlight_color); text-decoration: underline;}
-
-.form{
-	margin-left: auto;
-	margin-right: auto;
-	text-align: left;
-	max-width: 40em;
-}
-table:not(.form) {border-collapse: collapse; width: 100%;}
-tr:not(.form)    {border-bottom: 1px var(--layer_2_color_border) solid;}
-tr > td          {padding: 0.5em;}
-@media(max-width: 30em) {
-	tr > td {
-		box-sizing: border-box;
-		float: left;
-		width: 100%;
-		padding: 0.5em;
-	}
-}
-
-pre{
-	padding: 2px;
-	border-bottom: 1px var(--layer_2_color_border) solid;
-	overflow-x: scroll;
-}
-
-.big_button{
-	width: 40%;
-	min-width: 200px;
-	max-width: 400px;
-	margin: 10px !important;
-	border-radius: 5px;
-	font-size: 1.8em;
-	font-weight: normal;
-}
-
-.progress_bar{
-	position: relative;
-	width: 100%;
-	height: 0;
-	background-color: #555;
-	overflow: hidden;
-	color: #eeeeee;
-	text-align: left;
-	white-space: nowrap;
-}
-.progressbar_inner{
-	position: absolute;
-	top: 0;
-	width: 0%;
-	left: 0;
-	height: 100%;
-	background-color: var(--highlight_color);;
-	overflow: hidden;
-	color: #000;
-	white-space: nowrap;
-}
-.progress_text{
-	overflow: hidden;
-	width: 100%;
-	white-space: nowrap;
-}
-
-.file_button{
-	position: relative;
-	box-sizing: border-box;
-	width: 300px;
-	max-width: 90%;
-	height: 3.6em;
-	margin: 10px;
-	padding: 0;
-	overflow: hidden;
-	border-radius: 2px;
-	box-shadow: 2px 2px 8px -3px var(--shadow_color);
-	background-color: var(--file_background_color);
-	color: #bfbfbf; /* Fallback */
-	color: var(--text_color);
-	word-break: break-all;
-	text-align: left;
-	line-height: 1.2em;
-	display: inline-block;
-	transition: box-shadow 0.3s, opacity 2s;
-	white-space: normal;
-	text-overflow: ellipsis;
-	vertical-align: top;
-}
-.file_button:hover,
-.file_button_selected {
-	box-shadow: 0px 0px 3px 3px var(--highlight_color);
-	text-decoration: none;
-	color: #bfbfbf; /* Fallback */
-	color: var(--text_color);
-}
-.file_button > img{
-	max-height: 100%;
-	max-width: 25%;
-	margin-right: 5px;
-	float: left;
-	display: block;
-}
-
-/* Form fields */
-
-.form_input {width: 100%;}
-
-/* BUTTONS */
-button,
-.button,
-input[type="submit"],
-input[type="button"],
-input[type="color"],
-select{
-	display: inline-block;
-	box-sizing: border-box;
-	border-radius: 2px;
-	border: none;
-	margin: 3px;
-	background: linear-gradient(var(--input_color), var(--input_color_dark));
-	padding: .4em .5em .4em .5em;
-	box-shadow: 2px 2px 6px -3px var(--shadow_color);
-	font-size: 0.9em;
-	line-height: 1em;
-	overflow: hidden;
-	text-decoration: none;
-	font-family: inherit;
-	color: #bfbfbf; /* Fallback */
-	color: var(--input_text_color);
-	outline: 0;
-	vertical-align: middle;
-	cursor: pointer;
-	transition: padding 0.25s, box-shadow 0.25s;
-}
-button:hover,
-.button:hover,
-input[type="submit"]:hover,
-input[type="button"]:hover,
-input[type="color"]:hover,
-select:hover,
-button:focus,
-.button:focus,
-input[type="submit"]:focus,
-input[type="button"]:focus,
-input[type="color"]:focus,
-select:focus{
-	color: #bfbfbf; /* Fallback */
-	color: var(--input_text_color);
-	text-decoration: none;
-	box-shadow: var(--highlight_border), 2px 2px 6px -3px var(--shadow_color);
-}
-button:active,
-.button:active,
-input[type="submit"]:active,
-input[type="button"]:active,
-input[type="color"]:active,
-select:active{
-	background: linear-gradient(var(--input_color_dark), var(--input_color));
-	box-shadow: inset 4px 4px 8px var(--shadow_color);
-	padding: .6em .3em .2em .7em; /* Exactly .2em offset compared to the inactive padding to give a depth effect */
-}
-.button_full_width      {width: calc(100% - 6px);}
-.button_highlight       {background: linear-gradient(var(--highlight_color),      var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}
-.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important;      color: var(--highlight_text_color) !important;}
-.button_red             {background: linear-gradient(var(--danger_color),         var(--danger_color_dark)) !important;    color: var(--highlight_text_color) !important;}
-.button_red:active      {background: linear-gradient(var(--danger_color_dark),    var(--danger_color)) !important;         color: var(--highlight_text_color) !important;}
-
-/* Dropdown list of the select tag */
-option{
-	background-color: var(--input_color_dark);
-	color: #bfbfbf; /* Fallback */
-	color: var(--text_color);
-}
-
-/* TEXT FIELDS */
-textarea,
-.groove,
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="number"]{
-	border: none;
-	box-sizing: border-box;
-	border-radius: 4px;
-	background: linear-gradient(var(--input_color_dark), var(--input_color));
-	box-shadow: inset 2px 2px 6px -3px var(--shadow_color);
-	padding: 3px 5px;
-	color: var(--input_text_color);
-	height: 26px;
-	font-family: 'Ubuntu', sans-serif;
-	font-size: 1em;
-	vertical-align: middle;
-	outline: 0;
-	transition: box-shadow 0.3s;
-}
-textarea:active,
-input[type="text"]:active,
-input[type="password"]:active,
-input[type="email"]:active,
-input[type="number"]:active,
-textarea:focus,
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="email"]:focus,
-input[type="number"]:focus{
-	box-shadow: var(--highlight_border), inset 3px 3px 6px -3px var(--shadow_color);
-}
-
-input[type=file]{
-	visibility: hidden;
-	position: static;
-	width: 0;
-	height: 0;
-}

res/static/style/listview_embed.css

@@ -1,87 +0,0 @@
-/* 
-    Created on : Jul 30, 2015, 12:46:39 PM
-    Author     : Fornax
-*/
-
-.file-container{
-	position: absolute;
-	top: 100px;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
-	width: 100%;
-	overflow: hidden;
-	border: none;
-}
-
-.file-container-frame{
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	border: none;
-}
-
-#listNavigator{
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: -100px;
-	height: 58px;
-	background-color: #000;
-	border-bottom: 2px ridge #9FCF6C;
-	text-align: center;
-	overflow-x: hidden;
-	overflow-y: hidden;
-	z-index: 1000;
-}
-
-#listNavigatorItems{
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	height: 100%;
-	white-space: nowrap;
-	overflow-x: scroll;
-	overflow-y: hidden;
-	border: none;
-	padding: 0 40px;
-	z-index: 1001;
-	
-}
-
-.listItem{
-	display: inline-block;
-	position: relative;
-	height: 92%;
-	width: 100px;
-	margin-right: 5px;
-	text-align: center;
-	border: #333 solid 2px;
-	font-size: 12px;
-	overflow: hidden;
-	cursor: pointer;
-}
-
-.listItemThumbnail{
-	position: relative;
-	max-width: 100%;
-	max-height: 74%;
-	margin: 0;
-}
-
-#arrow-left{
-	position: fixed;
-	height: 58px;
-	width: 25px;
-	left: 0;
-	z-index: 1002;
-}
-
-#arrow-right{
-	position: fixed;
-	height: 58px;
-	width: 25px;
-	right: 0;
-	z-index: 1002;
-}

res/static/style/viewer.css

@@ -1,353 +0,0 @@
-/*
-    Created on : May 22, 2015, 1:20:02 PM
-    Author     : Fornax
-*/
-
-/* Viewer container */
-.file_viewer {
-	position: absolute;
-	display: flex;
-	flex-direction: column;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	overflow: hidden;
-}
-
-/* Headerbar (row 1) */
-.file_viewer > .file_viewer_headerbar {
-	flex-grow: 0;
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: row;
-	text-align: left;
-	padding: 8px;
-	z-index: 10;
-}
-
-/* Headerbar components */
-.file_viewer > .file_viewer_headerbar > * {
-	flex-grow: 0;
-	flex-shrink: 0;
-	margin-left: .4em;
-	margin-right: .4em;
-	display: inline-flex;
-}
-.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
-	flex-grow: 1;
-	flex-shrink: 1;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	white-space: nowrap;
-	line-height: 2em;
-	text-overflow: ellipsis;
-}
-.file_viewer > .file_viewer_headerbar > .button_home::after {
-	content: "pixeldrain";
-}
-@media (max-width: 500px) {
-	.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;
-	flex-shrink: 0;
-	margin-right: 1em;
-}
-/* List Navigator (row 2) */
-.file_viewer > .list_navigator {
-	flex-grow: 0;
-	flex-shrink: 0;
-	position: relative;
-	display: none; /* Becomes visible if the page is a list */
-	width: 100%;
-	background-color: var(--layer_1_color);
-	box-shadow: 0 0 8px var(--shadow_color);
-	text-align: center;
-	line-height: 1em;
-	overflow-x: scroll;
-	overflow-y: hidden;
-	z-index: 50;
-	white-space: nowrap;
-}
-.file_viewer > .list_navigator > .list_item{
-	height: 2.6em !important;
-	width: 220px !important;
-}
-
-/* File preview area (row 3) */
-.file_viewer > .file_viewer_window {
-	flex-grow: 1;
-	flex-shrink: 1;
-	position: relative;
-	display: inline-block;
-	width: auto;
-	height: auto;
-	margin: 0;
-	z-index: 9;
-}
-.file_viewer > .file_viewer_window > .file_viewer_file_preview {
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	display: inline-block;
-	min-height: 100px;
-	min-width: 100px;
-	text-align: center;
-	vertical-align: middle;
-	transition: left 0.5s;
-	overflow: hidden;
-}
-
-/* Toolbars */
-.file_viewer > .file_viewer_window > .file_viewer_toolbar {
-	position: absolute;
-	width: 8em;
-	z-index: 49;
-	overflow: hidden;
-	float: left;
-	background-color: var(--layer_1_color);
-	left: -9em;
-	bottom: 0;
-	top: 0;
-	padding: 0;
-	text-align: left;
-	box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);
-	transition: left 0.5s;
-}
-.file_viewer > .file_viewer_window > .file_viewer_sharebar{
-	position: absolute;
-	width: 7em;
-	left: -8em;
-	bottom: 0;
-	top: 0;
-	overflow-y: scroll;
-	overflow-x: hidden;
-	float: left;
-	background-color: var(--layer_1_color);
-	box-shadow: 2px 2px 8px var(--shadow_color);
-	text-align: center;
-	z-index: 48;
-	overflow: hidden;
-	transition: left 0.5s;
-}
-
-/* =====================
-   == FILE CONTAINERS ==
-   =====================*/
-.image-container{
-	position: relative;
-	height: 100%;
-	width: 100%;
-	text-align: center;
-	overflow: hidden;
-}
-
-.image{
-	position: relative;
-	display: block;
-	margin: auto;
-	max-width: 100%;
-	max-height: 100%;
-}
-
-.text-container{
-	background: #333 none;
-	position: relative;
-	text-align: left;
-	height: 100%;
-	width: 100%;
-	padding: 5px 5px 5px 20px;
-	box-sizing: border-box;
-	overflow-y: scroll;
-	overflow-x: hidden;
-}
-.text-container > pre {
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	overflow: hidden;
-
-}
-
-.pannable{
-	position: relative;
-	display: inline-block;
-	margin: auto;
-	max-width: 100%;
-	max-height: 100%;
-	cursor: move;
-	top: 50%;
-	transform: translateY(-50%);
-	-webkit-transform: translateY(-50%);
-}
-
-.center{
-	position: relative;
-	display: block;
-	margin: auto;
-	max-width: 100%;
-	max-height: 100%;
-	top: 50%;
-	transform: translateY(-50%);
-	-webkit-transform: translateY(-50%);
-}
-
-.drop-shadow{
-	box-shadow: var(--shadow_color) 10px 10px 50px;
-}
-
-/* ========================
-   || TOOLBAR COMPONENTS ||
-   ======================== */
-
-
-/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
-.file_viewer_toolbar > div {
-	position: absolute;
-	left: 0;
-	top: 0;
-	bottom: 0;
-	right: -30px;
-	overflow-y: scroll;
-	overflow-x: hidden;
-}
-.file_viewer_toolbar > div > div {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 8em;
-	height: auto;
-}
-
-.toolbar_button{
-	text-align: left;
-}
-.toolbar_button > img {
-	width: 24px;
-	height: 24px;
-}
-.toolbar_button > span {
-	vertical-align: 6px;
-}
-
-.toolbar_label {
-	text-align: left;
-	padding-left: 10px;
-	font-size: 0.8em;
-	line-height: 0.7em;
-	margin-top: 0.5em;
-}
-
-/* =========================
-   || SHAREBAR COMPONENTS ||
-   ========================= */
-
-.sharebar-button {text-align: center;}
-
-/* =====================
-   || MISC COMPONENTS ||
-   ===================== */
-
-.popup {
-	position: absolute;
-	visibility: hidden;
-	display: flex;
-	flex-direction: column;
-	opacity: 0;
-	transition: visibility .5s, opacity .5s;
-	background-color: var(--layer_2_color);
-	border-color: var(--layer_2_color_border);
-	max-height: 100%;
-	max-width: 100%;
-	top: 20%;
-	left: 50%;
-	transform: translate(-50%, -20%);
-	padding: 0;
-	box-sizing: border-box;
-	text-align: left;
-	box-shadow: var(--shadow_color) 0px 0px 50px;
-}
-.popup > .highlight_light {
-	font-size: 1.2em;
-}
-.popup > .content_area {
-	flex: 1;
-	overflow-y: scroll;
-	padding: 10px;
-}
-
-.details_popup{
-	width: 1500px;
-	height: 800px;
-	z-index: 200;
-}
-.captcha_popup{
-	height: auto;
-	width: 450px;
-	z-index: 201;
-}
-#captcha_popup_captcha > div {
-	display: inline-block;
-}
-
-table {width: auto !important;}
-table > tbody > tr {border: none !important;}
-
-.corner-popup{
-	position: fixed;
-	background-color: var(--background_color);
-	right: 20px;
-	bottom: 20px;
-	width: fit-content;
-	height: fit-content;
-	overflow: hidden;
-	padding: 5px;
-
-	box-shadow: var(--shadow_color) 0px 0px 50px;
-	z-index: 200;
-}
-
-.bytecounter{
-	color: var(--text_color);
-	font-size: 16px;
-	font-family: 'Ubuntu', sans-serif;
-	line-height: 20px;
-	text-align: right;
-	display: inline-block;
-	background-image: url("/res/img/bytecounter.png");
-	background-position: top right;
-	width: 136px;
-	height: 36px;
-	padding: 0;
-	padding-right: 1px;
-}
-
-/* ====================
-   || LIST NAVIGATOR ||
-   ==================== */
-
-.file-container{
-	position: absolute;
-	top: 100px;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
-	width: 100%;
-	overflow: hidden;
-	border: none;
-}
-
-.file-container-frame{
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	border: none;
-}

res/static/style/viewer_embed.css

@@ -1,128 +0,0 @@
-/* 
-    Created on : May 22, 2015, 1:20:02 PM
-    Author     : Fornax
-*/
-
-body{
-	background-color: #111;
-	background-image: url("img/checker.png");
-	background-repeat: repeat;
-	color: #eeeeee;
-	font-size: 16px;
-	font-family: 'Ubuntu', sans-serif;
-	margin: 0;
-	overflow: hidden;
-}
-
-a{
-	color: #9FCF6C;
-	text-decoration: none;
-}
-
-a:hover{
-	text-decoration: underline;
-	color: #9FCF6C;
-}
-
-::-webkit-scrollbar{
-	width: 10px;  /* for vertical scrollbars */
-	height: 10px; /* for horizontal scrollbars */
-}
-::-webkit-scrollbar-track{
-	background: #000;
-}
-::-webkit-scrollbar-thumb{
-	background-color: #444;
-}
-::-webkit-scrollbar-corner{
-	background: transparent;
-}
-
-button:active{
-	background-color: #111;
-}
-button:hover{
-	background-color: #333;
-}
-
-#filepreview{
-	position: absolute;
-	display: inline-block;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	min-height: 100px;
-	min-width: 100px;
-	text-align: center;
-	vertical-align: middle;
-}
-
-/* ===========================
-   == START FILE CONTAINERS ==
-   ===========================*/
-.image-container{
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
-	height: 100%;
-	width: 100%;
-	text-align: center;
-	overflow: hidden;
-}
-
-.image{
-	position: relative;
-	display: block;
-	margin: auto;
-	max-width: 100%;
-	max-height: 100%;
-}
-
-.text-container{
-	background: #333 none;
-	position: absolute;
-	overflow-y: scroll;
-	overflow-x: auto;
-	text-align: left;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	padding: 5px 5px 5px 20px;
-	box-sizing: border-box;
-}
-
-.pre-container{
-	white-space: pre-wrap;
-	word-wrap: break-word;
-}
-
-.pannable{
-	position: relative;
-	display: inline-block;
-	margin: auto;
-	max-width: 100%;
-	max-height: 100%;
-	cursor: move;
-	top: 50%;
-	transform: translateY(-50%);
-	-webkit-transform: translateY(-50%);
-}
-
-.center{
-	position: relative;
-	display: block;
-	margin: auto;
-	max-width: 100%;
-	max-height: 100%;
-	top: 50%;
-	transform: translateY(-50%);
-	-webkit-transform: translateY(-50%);
-}
-
-.drop-shadow{
-	box-shadow: #000 10px 10px 50px;
-}

res/static/typescript/home/home.ts

@@ -68,6 +68,7 @@ class UploadProgressBar implements FileUpload {
 		this.uploadDiv.appendChild(linkSpan)
 	}
 	public onFailure(error: string) {
+		this.uploadDiv.innerHTML = "" // Remove uploading progress
 		this.uploadDiv.style.background = 'var(--danger_color)'
 		this.uploadDiv.appendChild(document.createTextNode(this.file.name))
 		this.uploadDiv.appendChild(document.createElement("br"))
@@ -109,43 +110,35 @@ function createList(title: string, anonymous: boolean){
 		});
 	}
 
-	$.ajax({
-		url: "/api/list",
-		contentType: "application/json",
-		method: "POST",
-		data: JSON.stringify(postData),
-		dataType: "json",
-		success: function(response) {
-			var resultString = "<div class=\"file_button\">"
-				+ '<img src="'+apiEndpoint+'/list/'+response.id+'/thumbnail"/>'
+	var xhr = new XMLHttpRequest()
+	xhr.open("POST", apiEndpoint+"/list")
+	xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8")
+	xhr.onreadystatechange = function(){
+		if (xhr.readyState !== 4) {return;}
+		var resp = JSON.parse(xhr.response);
+
+		if (xhr.status < 400) {
+			// Request is a success
+			var div = document.createElement("div")
+			div.className = "file_button";
+			div.innerHTML = '<img src="'+apiEndpoint+'/list/'+resp.id+'/thumbnail"/>'
 				+ "List creation finished!<br/>"
 				+ title + "<br/>"
-				+ "<a href=\"/l/" + response.id + "\" target=\"_blank\">"+window.location.hostname+"/l/" + response.id + "</a>"
-				+ "</div>";
-			$('#uploads_queue').append(
-				$(resultString).hide().fadeIn('slow').css("display", "")
-			);
-			$("#uploads_queue").animate({
-				scrollTop: $("#uploads_queue").prop("scrollHeight")
-			}, 1000);
-			window.open('/l/'+response.id, '_blank');
-		},
-		error: function(xhr, status, error) {
-			console.log("xhr:");
-			console.log(xhr);
-			console.log("status:");
-			console.log(status);
-			console.log("error:");
-			console.log(error);
-			var resultString = "<div class=\"file_button\">List creation failed<br/>"
-				+ "The server responded with this: <br/>"
-				+ xhr.responseJSON.message
-				+ "</div>";
-			$('#uploads_queue').append(
-				$(resultString).hide().fadeIn('slow').css("display", "")
-			);
+				+ '<a href="/l/'+resp.id+'" target="_blank">'+window.location.hostname+'/l/'+resp.id+'</a>';
+			document.getElementById("uploads_queue").appendChild(div);
+			window.open('/l/'+resp.id, '_blank');
+		} else {
+			console.log("status: "+xhr.status+" response: "+xhr.response)
+			var div = document.createElement("div")
+			div.className = "file_button";
+			div.innerHTML = "List creation failed<br/>"
+				+ "The server responded with:<br/>"
+				+ resp.message;
+			document.getElementById("uploads_queue").append(div);
 		}
-	});
+	}
+
+	xhr.send(JSON.stringify(postData));
 }
 
 // Form upload handlers

res/static/typescript/home/tsconfig.json

@@ -1,11 +1,10 @@
 {
 	"compilerOptions": {
-		"outFile": "../../script/compiled/home.js"
+		"outFile": "../../../include/script/compiled/home.js"
 	},
 	"files": [
 		"home.ts",
 		"../lib/cookie.ts",
-		"../lib/jquery.d.ts",
 		"../lib/uploader.ts"
 	]
 }

res/static/typescript/lib/uploader.ts

@@ -5,7 +5,7 @@ interface FileUpload {
 	name: string
 	onProgress(progress: number)
 	onFinished(id: string)
-	onFailure(response: JQuery.Ajax.ErrorTextStatus, error: string)
+	onFailure(errorID: string, errorMessage: string)
 }
 
 class UploadManager {
@@ -84,37 +84,38 @@ class UploadWorker {
 		formData.append("name", file.name)
 		formData.append('file', file.file)
 
-		$.ajax({
-			type: 'POST',
-			url: apiEndpoint+"/file",
-			data: formData,
-			timeout: 21600000, // 6 hours, to account for slow connections
-			cache: false,
-			async: true,
-			crossDomain: false,
-			contentType: false,
-			processData: false,
-			xhr: function () {
-				var xhr = new XMLHttpRequest();
-				xhr.upload.addEventListener("progress", function (evt) {
-					if (evt.lengthComputable) {
-						file.onProgress(evt.loaded / evt.total)
-					}
-				}, false);
-				return xhr;
-			},
-			success: function (data) {
-				file.onFinished(data.id)
-				that.setHistoryCookie(data.id)
-				console.log("Done: " + data.id)
+		var xhr = new XMLHttpRequest()
+		xhr.open("POST", apiEndpoint+"/file")
+		xhr.timeout = 21600000 // 6 hours, to account for slow connections
 
+		// Update progess bar on progress
+		xhr.upload.addEventListener("progress", function (evt) {
+			if (evt.lengthComputable) {
+				file.onProgress(evt.loaded / evt.total)
+			}
+		});
+
+		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);
+				// Request is a success
+				file.onFinished(resp.id)
+				that.setHistoryCookie(resp.id)
 				that.newFile() // Continue uploading on this thread
-			},
-			error: function (xhr, status, error){
-				console.log("status: "+status+" error: "+error)
+			} else {
+				var value, message
+				if (xhr.status >= 400) {
+					var resp = JSON.parse(xhr.response);
+					value = resp.value
+					message = resp.message
+				}
+				console.log("Upload error. status: "+xhr.status+" response: "+xhr.response)
 
 				if (that.tries === 3) {
-					file.onFailure(status, error)
+					file.onFailure(value, message)
 
 					setTimeout(function(){that.newFile()}, 2000) // Try to continue
 					return; // Upload failed
@@ -122,9 +123,11 @@ class UploadWorker {
 
 				// Try again
 				that.tries++
-				setTimeout(function(){that.upload(file)}, that.tries*3000)
+				setTimeout(function(){that.upload(file)}, that.tries*5000)
 			}
-		});
+		}
+
+		xhr.send(formData)
 	}
 
 	private setHistoryCookie(id: string){

res/static/yo.html

@@ -1 +0,0 @@
-yo