just need to make the makefile work somehow

Makefile

@@ -13,3 +13,4 @@ backgroundrun:
 	go run main.go
 backgroundts:
 	tsc --watch --project res/static/res/typescript/home 
+	            --project res/static/res/typescript/textupload

res/static/res/script/compiled/home.js

@@ -4,10 +4,11 @@ var totalUploads = 0;
 var UploadProgressBar = /** @class */ (function () {
     function UploadProgressBar(file) {
         this.file = file;
+        this.name = file.name;
         this.queueNum = totalUploads;
         totalUploads++;
         this.uploadDiv = document.createElement("a");
-        this.uploadDiv.setAttribute("class", "uploadItem");
+        this.uploadDiv.setAttribute("class", "file_button");
         this.uploadDiv.innerText = "Queued\n" + this.file.name;
         this.uploadDivJQ = $(this.uploadDiv);
         $("#uploads_queue").append(this.uploadDivJQ.hide().fadeIn('slow'));
@@ -25,7 +26,7 @@ var UploadProgressBar = /** @class */ (function () {
         this.uploadDiv.setAttribute('style', 'background: #111');
         this.uploadDiv.setAttribute('href', '/u/' + id);
         this.uploadDiv.setAttribute("target", "_blank");
-        this.uploadDivJQ.html('<img src="/api/file/' + id + '/thumbnail" alt="' + this.file.name + '" class="uploadItemImage"/>'
+        this.uploadDivJQ.html('<img src="/api/file/' + id + '/thumbnail" alt="' + this.file.name + '"/>'
             + this.file.name + '<br/>'
             + '<span style="color: var(--highlight_color);">' + window.location.hostname + '/u/' + id + '</span>');
     };
@@ -153,10 +154,10 @@ var UploadWorker = /** @class */ (function () {
         this.upload(file);
     };
     UploadWorker.prototype.upload = function (file) {
-        console.debug("Starting upload of " + file.file.name);
+        console.debug("Starting upload of " + file.name);
         var formData = new FormData();
         formData.append('file', file.file);
-        formData.append("name", file.file.name);
+        formData.append("name", file.name);
         var that = this; // jquery changes the definiton of "this"
         $.ajax({
             url: "/api/file",

res/static/res/script/compiled/textupload.js

@@ -0,0 +1,187 @@
+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/res/script/history.js

@@ -38,10 +38,9 @@ $(document).ready(function () {
 
 function historyAddItem(json) {
 	if(!json.success){
-		var uploadItem = "<div class=\"uploadItem\" >"
+		var uploadItem = "<div class=\"file_button\" >"
 		+ "<img src=\"/res/img/cross.png\" "
-		+ "alt=\"File has expired\" "
+		+ "alt=\"File has expired\" />"
-		+ "class=\"uploadItemImage\" />"
 		+ "File has expired"
 		+ "</div>";
 
@@ -52,16 +51,13 @@ function historyAddItem(json) {
 	
 	var date = new Date(json.date_upload * 1000);
 
-	var uploadItem = "<div class=\"uploadItem\" >"
+	var uploadItem =  '<a href="/u/'+ json.id +'" target="_blank" class="file_button">'
-		+ "<a href=\"/u/" + json.id + "\" target=\"_blank\">"
+		+ '<img src="'+ APIURL + json.thumbnail_href + '"'
-		+ "<img src=\"" + APIURL + json.thumbnail_href + "\" "
+		+ "alt=\"" + json.file_name + "\" />"
-		+ "alt=\"" + json.file_name + "\" "
+		+ '<span style="color: var(--highlight_color);">'+json.file_name+'</span>'
-		+ "class=\"uploadItemImage\" />"
-		+ json.file_name
-		+ "</a>"
 		+ "<br/>"
 		+ date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
-		+ "</div>";
+		+ "</a>";
 
 	$("#uploadedFiles").append($(uploadItem).hide().fadeIn(400));
 }

res/static/res/script/listmaker.js

@@ -49,7 +49,7 @@ function createList(){
 
 function listCreated(response){
 	if(response.success){
-		resultString = "<div class=\"uploadItem\">List creation finished!<br/>"
+		resultString = "<div class=\"file_button\">List creation finished!<br/>"
 			+ "Your List URL: <br/>"
 			+ "<a href=\"/l/" + response.id + "\" target=\"_blank\" style=\"font-weight: bold;\">"+window.location.hostname+"/l/" + response.id + "</a>"
 			+ "</div>";
@@ -59,7 +59,7 @@ function listCreated(response){
 		);
 		window.open('/l/'+response.id, '_blank');
 	}else{
-		resultString = "<div class=\"uploadItem\">List creation failed<br/>"
+		resultString = "<div class=\"file_button\">List creation failed<br/>"
 			+ "The server responded with this: <br/>"
 			+ response.type + ": " + response.value
 			+ "</div>";

res/static/res/style/history.css

@@ -1,34 +0,0 @@
-.uploadedFiles{
-	position: relative;
-	width: 100%;
-	margin: 0;
-	height: auto;
-	display: inline-block;
-}
-
-.uploadItem, .uploadItem:hover{
-	position: relative;
-	box-sizing: border-box;
-	width: 322px;
-	max-width: 90%;
-	height: 60px;
-	float: left;
-	margin: 3px;
-	padding: 0;
-	border: 1px #555 solid;
-	overflow: hidden;
-	background-color: #111;
-	color: var(--text_color);
-	word-break: break-all;
-	text-align: left;
-	line-height: 120%;
-	display: block;
-}
-
-.uploadItemImage{
-	max-height: 60px;
-	max-width: 120px;
-	margin-right: 5px;
-	float: left;
-	display: block;
-}

res/static/res/style/home.css

@@ -1,33 +0,0 @@
-/* 
-    Created on : Jun 3, 2015, 9:33:11 AM
-    Author     : Fornax
-*/
-
-.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;
-}

res/static/res/style/layout.css

@@ -20,7 +20,7 @@ html{
 	height: 100%;
 }
 
-/* HEAD */
+/* Page layout elements */
 
 #header{
 	position: relative;
@@ -41,17 +41,6 @@ html{
 	margin-top: 15px;
 }
 
-#uploads_queue{
-	position: relative;
-	width: 100%;
-	height: 0;
-	overflow-x: hidden;
-	overflow-y: scroll;
-}
-
-
-/* Layout elements */
-
 .body{
 	position: relative;
 	display: inline-block;
@@ -205,6 +194,47 @@ a:hover{
 	white-space: nowrap;
 }
 
+.uploads_queue{
+	position: relative;
+	width: 100%;
+	height: 0;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+.files_container{
+	position: relative;
+	width: 100%;
+	margin: 0;
+	height: auto;
+	display: inline-block;
+}
+
+.file_button, .file_button:hover{
+	position: relative;
+	box-sizing: border-box;
+	width: 316px;
+	max-width: 90%;
+	height: 60px;
+	float: left;
+	margin: 6px;
+	padding: 0;
+	overflow: hidden;
+	box-shadow: 2px 2px 5px 2px #111;
+	background-color: #111;
+	color: var(--text_color);
+	word-break: break-all;
+	text-align: left;
+	line-height: 120%;
+	display: block;
+}
+.file_button > img{
+	max-height: 60px;
+	max-width: 120px;
+	margin-right: 5px;
+	float: left;
+	display: block;
+}
+
 /* Form fields */
 
 /* BUTTONS */

res/static/res/typescript/home/home.ts

@@ -9,11 +9,12 @@ class UploadProgressBar implements FileUpload {
 
 	constructor(file: File){
 		this.file = file
+		this.name = file.name
 		this.queueNum = totalUploads
 		totalUploads++
 
 		this.uploadDiv = document.createElement("a");
-		this.uploadDiv.setAttribute("class", "uploadItem");
+		this.uploadDiv.setAttribute("class", "file_button");
 		this.uploadDiv.innerText = "Queued\n" + this.file.name
 		this.uploadDivJQ = $(this.uploadDiv)
 
@@ -24,6 +25,7 @@ class UploadProgressBar implements FileUpload {
 
 	// Interface stuff
 	public file: File;
+	public name: string
 	public onProgress(progress: number){
 		this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.file.name
 		this.uploadDiv.setAttribute(
@@ -42,7 +44,7 @@ class UploadProgressBar implements FileUpload {
 		this.uploadDiv.setAttribute('href', '/u/'+id)
 		this.uploadDiv.setAttribute("target", "_blank");
 		this.uploadDivJQ.html(
-			'<img src="/api/file/'+id+'/thumbnail" alt="'+this.file.name+'" class="uploadItemImage"/>'
+			'<img src="/api/file/'+id+'/thumbnail" alt="'+this.file.name+'"/>'
 			+ this.file.name+'<br/>'
 			+ '<span style="color: var(--highlight_color);">'+window.location.hostname+'/u/'+id+'</span>'
 		)

res/static/res/typescript/lib/uploader.ts

@@ -1,5 +1,6 @@
 interface FileUpload {
-	file: File
+	file: Blob
+	name: string
 	onProgress(progress: number)
 	onFinished(id: string)
 	onFailure(response: JQuery.Ajax.ErrorTextStatus, error: string)
@@ -62,11 +63,11 @@ class UploadWorker {
 	}
 
 	private upload(file: FileUpload){
-		console.debug("Starting upload of " + file.file.name)
+		console.debug("Starting upload of " + file.name)
 
 		var formData = new FormData()
 		formData.append('file', file.file)
-		formData.append("name", file.file.name)
+		formData.append("name", file.name)
 
 		var that = this // jquery changes the definiton of "this"
 

res/static/res/typescript/textupload/text.ts

@@ -0,0 +1,69 @@
+var uploader: UploadManager|null = null
+
+class TextUpload implements FileUpload {
+	constructor(file: Blob, name: string){
+		this.file = file
+		this.name = name
+	}
+
+	// Interface stuff
+	public file: Blob;
+	public name: string
+	public onProgress(progress: number){return}
+	public onFinished(id: string){
+		setTimeout(window.location.href = "/u/" + id, 100);
+	}
+	public onFailure(response: JQuery.Ajax.ErrorTextStatus, error: string) {
+		alert("File upload failed! The server told us this: " + response);
+	}
+}
+
+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 = (<HTMLTextAreaElement>$(this).get(0)).selectionStart;
+		var end = (<HTMLTextAreaElement>$(this).get(0)).selectionEnd;
+
+		// set textarea value to: text before caret + tab + text after caret
+		$(this).val((<string>$(this).val()).substring(0, start)
+			+ "\t"
+			+ (<string>$(this).val()).substring(end));
+
+		// put caret at right position again
+		(<HTMLTextAreaElement>$(this).get(0)).selectionStart =
+			(<HTMLTextAreaElement>$(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/res/typescript/textupload/tsconfig.json

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

res/template/history.html

@@ -7,7 +7,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 		<link rel="stylesheet" href="/global.css"/>
 		<link rel="stylesheet" href="/res/style/layout.css"/>
-		<link rel="stylesheet" href="/res/style/history.css"/>
 		<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
 		<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"/>
 		<link rel="shortcut icon" href="/res/img/tray32.png"/>
@@ -44,7 +43,7 @@
 			This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
 			<br/><br/>
 			
-			<div id="uploadedFiles" class="uploadedFiles"></div>
+			<div id="uploadedFiles" class="files_container"></div>
 			{{template "footer"}}
 		</div>
 		<script src="/res/script/history.js"></script>

res/template/home.html

@@ -6,9 +6,7 @@
 		<meta charset="UTF-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 		<link rel="stylesheet" href="/global.css"/>
-		<link rel="stylesheet" href="/res/style/home.css"/>
 		<link rel="stylesheet" href="/res/style/layout.css"/>
-		<link rel="stylesheet" href="/res/style/history.css"/>
 		<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
 		<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"/>
 		<link rel="shortcut icon" href="/res/img/tray32.png"/>
@@ -42,7 +40,7 @@
 				<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/>
 				
-				<div id="uploads_queue"></div>
+				<div id="uploads_queue" class="uploads_queue"></div>
 			</div>
 			<div class="highlight_dark border-bottom">
 				<button id="btn_create_list">Create list with uploaded files</button>

res/template/paste.html

@@ -55,26 +55,8 @@
 			</div>
 		</div>
 
-		<script src="/res/script/Cookie.js"></script>
+		<script src="/res/script/compiled/textupload.js"></script>
-		<script src="/res/script/paste.js"></script>
+		{{template "analytics"}}
-
-		<!-- Google Analytics Tracking code -->
-		<script>
-			(function (i, s, o, g, r, a, m) {
-				i['GoogleAnalyticsObject'] = r;
-				i[r] = i[r] || function () {
-					(i[r].q = i[r].q || []).push(arguments)
-				}, i[r].l = 1 * new Date();
-				a = s.createElement(o),
-					m = s.getElementsByTagName(o)[0];
-				a.async = 1;
-				a.src = g;
-				m.parentNode.insertBefore(a, m)
-			})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-
-			ga('create', 'UA-24463738-4', 'auto');
-			ga('send', 'pageview');
-		</script>
 	</body>
 </html>
 {{end}}