From c26d35282c02fe21a5a31194d64cb5a3c7e824ce Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Wed, 17 Jan 2018 01:16:06 +0100 Subject: [PATCH] Making giant leaps with typescript --- .gitignore | 4 +- Makefile | 4 +- res/static/res/script/compiled/README | 4 + res/static/res/script/home.js | 159 --------------- res/static/res/script/home.js.old | 194 ------------------- res/static/res/script/listmaker.js | 33 ++-- res/static/res/script/pixellib.js | 109 ----------- res/static/res/style/global.css | 36 ---- res/static/res/style/history.css | 6 +- res/static/res/style/layout.css | 10 +- res/static/res/typescript/home/home.ts | 125 ++++++++---- res/static/res/typescript/home/tsconfig.json | 11 ++ res/static/res/typescript/lib/uploader.ts | 81 +++++--- res/template/home.html | 21 +- 14 files changed, 187 insertions(+), 610 deletions(-) create mode 100644 res/static/res/script/compiled/README delete mode 100644 res/static/res/script/home.js delete mode 100644 res/static/res/script/home.js.old delete mode 100644 res/static/res/script/pixellib.js delete mode 100644 res/static/res/style/global.css create mode 100644 res/static/res/typescript/home/tsconfig.json diff --git a/.gitignore b/.gitignore index e50f0ba..f03aff9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ .vscode main pdwebconfig.toml -res/script/pixellib.js -res/script/home.js \ No newline at end of file +res/static/res/script/pixellib.js +res/static/res/script/home.js \ No newline at end of file diff --git a/Makefile b/Makefile index 6aa826b..3fb9420 100644 --- a/Makefile +++ b/Makefile @@ -12,6 +12,4 @@ deps: backgroundrun: go run main.go backgroundts: - tsc --watch res/static/res/typescript/lib/*.ts --outFile res/static/res/script/pixellib.js \ - res/static/res/typescript/home/*.ts \ - res/static/res/typescript/lib/*.ts --outFile res/static/res/script/home.js + tsc --watch --project res/static/res/typescript/home diff --git a/res/static/res/script/compiled/README b/res/static/res/script/compiled/README new file mode 100644 index 0000000..e1286db --- /dev/null +++ b/res/static/res/script/compiled/README @@ -0,0 +1,4 @@ +All files in this directory are compiled typescript files. You can find the +sources in /res/typescript. + +Have fun typing! \ No newline at end of file diff --git a/res/static/res/script/home.js b/res/static/res/script/home.js deleted file mode 100644 index 31b5cae..0000000 --- a/res/static/res/script/home.js +++ /dev/null @@ -1,159 +0,0 @@ -"use strict"; -var uploader = null; -/* - * Form upload handlers - */ -$("#selectFileButton").click(function (event) { - $("#fileInputField").click(); -}); -function fileInputChange(dom, files) { - if (uploader === null) { - uploader = new UploadManager(); - } - uploader.uploadFileList(files); - // This resets the file input field - // http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery - $('#fileName').html(""); - $("#fileUploadButton").css("visibility", "hidden"); - $("#fileInputField").wrap("
").closest("form").get(0).reset(); - $("#fileInputField").unwrap(); -} -/* - * Drag 'n Drop upload handlers - */ -$(document).on('dragover', function (e) { - e.preventDefault(); - e.stopPropagation(); -}); -$(document).on('dragenter', function (e) { - e.preventDefault(); - e.stopPropagation(); -}); -document.addEventListener('drop', function (e) { - if (e.dataTransfer && e.dataTransfer.files.length > 0) { - e.preventDefault(); - e.stopPropagation(); - if (uploader === null) { - uploader = new UploadManager(); - } - uploader.uploadFileList(e.dataTransfer.files); - } -}); -/* - * Upload functions - */ -// function pushUploads(array){ -// var len = array.length; -// for(i = 0; i < len; i++){ -// uploadQueue.push(array[i]); -// } -// startFileUpload(); -// } -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(); - } - UploadManager.prototype.uploadFile = function (file) { - console.debug("Adding upload to queue"); - this.uploadQueue.push(file); - if (this.uploadThreads.length < 4) { - console.debug("Starting upload thread"); - setTimeout(new UploadWorker(this).start(), 0); // Start a new upload thread - } - }; - UploadManager.prototype.uploadFileList = function (files) { - for (var i = 0; i < files.length; i++) { - this.uploadFile(files.item(i)); - } - }; - UploadManager.prototype.grabFile = function () { - if (this.uploadQueue.length > 0) { - return this.uploadQueue.pop(); - } - else { - return undefined; - } - }; - return UploadManager; -}()); -var UploadWorker = /** @class */ (function () { - function UploadWorker(manager) { - this.manager = manager; - } - UploadWorker.prototype.start = function () { - var file = this.manager.grabFile(); - if (file === null) { - console.debug("No file"); - return; // Stop the thread - } - 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); - formData.append("name", file.name); - $.ajax({ - url: "/api/file", - data: formData, - cache: false, - crossDomain: false, - contentType: false, - processData: false, - type: 'POST', - success: function (data) { - console.log("Done: " + data.id); - this.setHistoryCookie(data.id); - }, - error: function (xhr, status, error) { - console.log(status); - console.log(error); - if (this.tries === 3) { - alert("Upload failed: " + status); - return; // Upload failed - } - // Try again - this.tries++; - this.upload(file); - } - }); - }; - 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; -}()); diff --git a/res/static/res/script/home.js.old b/res/static/res/script/home.js.old deleted file mode 100644 index 7a3a26c..0000000 --- a/res/static/res/script/home.js.old +++ /dev/null @@ -1,194 +0,0 @@ -/* - * Made by Fornax for PixelDrain - * Use if you want - * - * I'll clean up this baby some time in the future too - */ - -/* - * Form upload handlers - */ - - -/* global API_URL */ - -$("#selectFileButton").click(function(event){ - $("#fileInputField").click(); -}); - -$("#fileInputField").change(function(){ - pushUploads($("#fileInputField")[0].files); - - // This resets the file input field - // http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery - $('#fileName').html(""); - $("#fileUploadButton").css("visibility", "hidden"); - $("#fileInputField").wrap("").closest("form").get(0).reset(); - $("#fileInputField").unwrap(); -}); - -/* - * Drag 'n Drop upload handlers - */ -$(document).on('dragover', function (e) { - e.preventDefault(); - e.stopPropagation(); -}); -$(document).on('dragenter', function (e) { - e.preventDefault(); - e.stopPropagation(); -}); -$(document).on('drop', function (e) { - if (e.originalEvent.dataTransfer) { - var len = e.originalEvent.dataTransfer.files.length; - - if (len) { - e.preventDefault(); - e.stopPropagation(); - - pushUploads(e.originalEvent.dataTransfer.files); - } - } -}); - -/* - * Upload functions - */ -function pushUploads(array){ - var len = array.length; - - for(i = 0; i < len; i++){ - uploadQueue.push(array[i]); - } - - startFileUpload(); -} - -var isFirstUpload = true; -var uploadQueue = new Array(); -var isUploading = false; - -function startFileUpload() { - if(isUploading){ - return; - } - var file = uploadQueue.shift(); - - if(file === null){ - return; - } - - if(isFirstUpload){ - isFirstUpload = false; - $("#uploads-completed").animate( - {"height": "340px"}, - {"duration": 2000, queue: false} - ); - $("#progress-bar").animate( - {"height": "20px"}, - {"duration": 1000, queue: false} - ); - } - - isUploading = true; - formData = new FormData(); - formData.append('file', file); - formData.append("name", file.name); - - jQuery.ajax({ - url: API_URL + "/file", - data: formData, - cache: false, - crossDomain: false, - contentType: false, - processData: false, - type: 'POST', - xhr: function () { - var xhr = new window.XMLHttpRequest(); - xhr.upload.addEventListener("progress", function (evt) { - if (evt.lengthComputable) { - percentComplete = (evt.loaded / evt.total) * 100; - - $("#upload-progress").animate( - {"width": percentComplete + "%"}, - {"duration": 200, queue: false} - ); - - $(".progress-text").html("Uploading... " - + evt.loaded + " / " + evt.total + " Bytes " - + "(" + uploadQueue.length + " files in queue)" - ); - } - }, false); - - return xhr; - }, - success: function (data) { - isUploading = false; - if(uploadQueue.length > 0){ - startFileUpload(); - }else{ - $(".progress-text").html("Done! File link is available below"); - } - - fileUploadComplete(data); - }, - error: function (xhr, status, error){ - console.log(status); - console.log(error); - } - }); -} - -function fileUploadComplete(json) { - if (json.success) { - setHistoryCookie(json.id) - - resultString = "
Upload successful!
" - + "Your file URL:
" - + ""+window.location.hostname+"/u/"+json.id+"" - + "
"; - - $('#uploads-completed').prepend( - $(resultString).hide().fadeIn('slow') - ); - - addToList(json.id, ""); - } else { - resultString = "
Something went wrong! " - + "The server responded with this:
\"" + json.message - + "\"
"; - - $('#uploads-completed').prepend( - $(resultString).hide().fadeIn('slow') - ); - - $(".progressText").html(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 + "."); -} - -$("#btnClearHistory").click(function(){ - $('#uploads-container').html(""); - listItems = new Array(); -}); \ No newline at end of file diff --git a/res/static/res/script/listmaker.js b/res/static/res/script/listmaker.js index 51eb010..33e2720 100644 --- a/res/static/res/script/listmaker.js +++ b/res/static/res/script/listmaker.js @@ -1,23 +1,22 @@ - -var listItems = new Array(); - -$("#btnCreateList").click(function (evt) { +$("#btn_create_list").click(function (evt) { createList(); }); -function addToList(id, desc){ - var listEntry = {id: id, desc: desc}; - - listItems.push(listEntry); -} - function createList(){ + let listfiles = new Array() + for (var i = 0; i < finishedUploads.length; i++) { + if (finishedUploads[i] === undefined) { + continue; + } + listfiles.push(finishedUploads[i]); + } + var url = "/api/list"; var postData = {}; var title = prompt( - "You are creating a list containing " + listItems.length + " files.\n" + "You are creating a list containing " + listfiles.length + " files.\n" + "What do you want to call it?", "My New Album" ); @@ -31,12 +30,10 @@ function createList(){ "files": new Array() }; - var arrayLength = listItems.length; - for (var i = 0; i < arrayLength; i++) { - postData.files[i] = { - "id": listItems[i]["id"], - "description": listItems[i]["desc"] - }; + for (var i = 0; i < listfiles.length; i++) { + postData.files.push({ + "id": listfiles[i] + }); } $.ajax({ @@ -57,7 +54,7 @@ function listCreated(response){ + ""+window.location.hostname+"/l/" + response.id + "" + ""; - $('#uploads-completed').prepend( + $('#uploads_completed').prepend( $(resultString).hide().fadeIn('slow') ); }else{ diff --git a/res/static/res/script/pixellib.js b/res/static/res/script/pixellib.js deleted file mode 100644 index e772a7f..0000000 --- a/res/static/res/script/pixellib.js +++ /dev/null @@ -1,109 +0,0 @@ -"use strict"; -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(); - } - UploadManager.prototype.uploadFile = function (file) { - console.debug("Adding upload to queue"); - this.uploadQueue.push(file); - if (this.uploadThreads.length < 4) { - console.debug("Starting upload thread"); - setTimeout(new UploadWorker(this).start(), 0); // Start a new upload thread - } - }; - UploadManager.prototype.uploadFileList = function (files) { - for (var i = 0; i < files.length; i++) { - this.uploadFile(files.item(i)); - } - }; - UploadManager.prototype.grabFile = function () { - if (this.uploadQueue.length > 0) { - return this.uploadQueue.pop(); - } - else { - return undefined; - } - }; - return UploadManager; -}()); -var UploadWorker = /** @class */ (function () { - function UploadWorker(manager) { - this.manager = manager; - } - UploadWorker.prototype.start = function () { - var file = this.manager.grabFile(); - if (file === null) { - console.debug("No file"); - return; // Stop the thread - } - 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); - formData.append("name", file.name); - $.ajax({ - url: "/api/file", - data: formData, - cache: false, - crossDomain: false, - contentType: false, - processData: false, - type: 'POST', - success: function (data) { - console.log("Done: " + data.id); - this.setHistoryCookie(data.id); - }, - error: function (xhr, status, error) { - console.log(status); - console.log(error); - if (this.tries === 3) { - alert("Upload failed: " + status); - return; // Upload failed - } - // Try again - this.tries++; - this.upload(file); - } - }); - }; - 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; -}()); diff --git a/res/static/res/style/global.css b/res/static/res/style/global.css deleted file mode 100644 index b86a692..0000000 --- a/res/static/res/style/global.css +++ /dev/null @@ -1,36 +0,0 @@ -/* - Created on : Dec 1, 2015, 9:54:01 PM - Author : Fornax -*/ - -.progress-bar{ - position: relative; - margin: 3px; - height: 20px; - background-color: #555; - border: #999 groove 2px; - overflow: hidden; - color: #eeeeee; - z-index: 100; - text-align: left; - white-space: nowrap; -} - -.progress-bar div{ - position: absolute; - top: 0; - width: 0%; - left: 0; - height: 100%; - background-color: #9FCF6C; - overflow: hidden; - color: #000; - white-space: nowrap; -} - -.progress-bar span, -.progress-bar div span { - overflow: hidden; - width: 100%; - white-space: nowrap; -} \ No newline at end of file diff --git a/res/static/res/style/history.css b/res/static/res/style/history.css index 9d4ad9c..c7bdb21 100644 --- a/res/static/res/style/history.css +++ b/res/static/res/style/history.css @@ -6,9 +6,10 @@ display: inline-block; } -.uploadItem{ +.uploadItem, .uploadItem:hover{ position: relative; - width: 238px; + box-sizing: border-box; + width: 322px; max-width: 90%; height: 60px; float: left; @@ -17,6 +18,7 @@ border: 1px #555 solid; overflow: hidden; background-color: #111; + color: var(--text_color); word-break: break-all; text-align: left; line-height: 120%; diff --git a/res/static/res/style/layout.css b/res/static/res/style/layout.css index 998354a..12c9ae7 100644 --- a/res/static/res/style/layout.css +++ b/res/static/res/style/layout.css @@ -35,13 +35,13 @@ html{ border-bottom: #606060 solid 1px; } -#header-image{ +#header_image{ width: 100%; max-width: 1000px; margin-top: 15px; } -#uploads-completed{ +#uploads_queue{ position: relative; width: 100%; height: 0; @@ -178,7 +178,7 @@ a:hover{ line-height: 8px; } -.progress-bar{ +.progress_bar{ position: relative; width: 100%; height: 0; @@ -188,7 +188,7 @@ a:hover{ text-align: left; white-space: nowrap; } -.progressbar-inner{ +.progressbar_inner{ position: absolute; top: 0; width: 0%; @@ -199,7 +199,7 @@ a:hover{ color: #000; white-space: nowrap; } -.progress-text{ +.progress_text{ overflow: hidden; width: 100%; white-space: nowrap; diff --git a/res/static/res/typescript/home/home.ts b/res/static/res/typescript/home/home.ts index fd3897d..8acdd44 100644 --- a/res/static/res/typescript/home/home.ts +++ b/res/static/res/typescript/home/home.ts @@ -1,62 +1,103 @@ +var uploader: UploadManager|null = null; +var finishedUploads: Array = new Array() +var totalUploads: number = 0 -var uploader: UploadManager|null = null; +class UploadProgressBar implements FileUpload { + private uploadDiv: HTMLAnchorElement + private uploadDivJQ: JQuery + private queueNum: number + + constructor(file: File){ + this.file = file + this.queueNum = totalUploads + totalUploads++ + + this.uploadDiv = document.createElement("a"); + this.uploadDiv.setAttribute("class", "uploadItem"); + this.uploadDiv.innerText = "Queued\n" + this.file.name + this.uploadDivJQ = $(this.uploadDiv) + + $("#uploads_queue").append( + this.uploadDivJQ.hide().fadeIn('slow') + ) + } + + // Interface stuff + public file: File; + public onProgress(progress: number){ + this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.file.name + this.uploadDiv.setAttribute( + 'style', + 'background: linear-gradient(' + +'to right, ' + +'#111 0%, ' + +'var(--highlight_color) '+ ((progress*100)) +'%, ' + +'#111 '+ ((progress*100)+1) +'%)' + ) + } + public onFinished(id: string){ + finishedUploads[this.queueNum] = id + + this.uploadDiv.setAttribute('style', 'background: #111') + this.uploadDiv.setAttribute('href', '/u/'+id) + this.uploadDiv.setAttribute("target", "_blank"); + this.uploadDivJQ.html( + ''+this.file.name+'' + + this.file.name+'
' + + ''+window.location.hostname+'/u/'+id+'' + ) + } +} + +function handleUploads(files: FileList) { + if (uploader === null){ + uploader = new UploadManager() + + $("#uploads_queue").animate( + {"height": "340px"}, + {"duration": 2000, queue: false} + ); + } + + for (var i = 0; i < files.length; i++) { + uploader.uploadFile(new UploadProgressBar(files.item(i))) + } +} /* * Form upload handlers */ -$("#selectFileButton").click(function(event){ - $("#fileInputField").click(); -}); +// Relay click event to hidden file field +$("#select_file_button").click(function(){$("#file_input_field").click()}) -function fileInputChange(dom: HTMLInputElement, files: FileList) { - if (uploader === null){ - uploader = new UploadManager() - } - - uploader.uploadFileList(files); +$("#file_input_field").change(function(evt){ + handleUploads((evt.target).files) // This resets the file input field // http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery - $('#fileName').html(""); - $("#fileUploadButton").css("visibility", "hidden"); - ($("#fileInputField").wrap("").closest("form").get(0)).reset(); - $("#fileInputField").unwrap(); -} + $('#file_name').html("") + $("#file_upload_button").css("visibility", "hidden"); + ($("#file_input_field").wrap("").closest("form").get(0)).reset() + $("#file_input_field").unwrap() +}) /* * Drag 'n Drop upload handlers */ $(document).on('dragover', function (e) { - e.preventDefault(); - e.stopPropagation(); -}); + e.preventDefault() + e.stopPropagation() +}) $(document).on('dragenter', function (e) { - e.preventDefault(); - e.stopPropagation(); -}); + e.preventDefault() + e.stopPropagation() +}) document.addEventListener('drop', function(e: DragEvent){ if (e.dataTransfer && e.dataTransfer.files.length > 0) { - e.preventDefault(); - e.stopPropagation(); + e.preventDefault() + e.stopPropagation() - if (uploader === null){ - uploader = new UploadManager() - } - - uploader.uploadFileList(e.dataTransfer.files); + handleUploads(e.dataTransfer.files) } -}) - -/* - * Upload functions - */ -// function pushUploads(array){ -// var len = array.length; - -// for(i = 0; i < len; i++){ -// uploadQueue.push(array[i]); -// } - -// startFileUpload(); -// } \ No newline at end of file +}) \ No newline at end of file diff --git a/res/static/res/typescript/home/tsconfig.json b/res/static/res/typescript/home/tsconfig.json new file mode 100644 index 0000000..77bea6c --- /dev/null +++ b/res/static/res/typescript/home/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "outFile": "../../script/compiled/home.js" + }, + "files": [ + "home.ts", + "../lib/cookie.ts", + "../lib/jquery.d.ts", + "../lib/uploader.ts" + ] +} \ No newline at end of file diff --git a/res/static/res/typescript/lib/uploader.ts b/res/static/res/typescript/lib/uploader.ts index 62a3436..a4811b8 100644 --- a/res/static/res/typescript/lib/uploader.ts +++ b/res/static/res/typescript/lib/uploader.ts @@ -1,26 +1,32 @@ +interface FileUpload { + file: File + onProgress(progress: number) + onFinished(id: string) +} class UploadManager { - private uploadQueue: Array = new Array(); + private uploadQueue: Array = new Array(); private uploadThreads: Array = new Array(); - private maxThreads: 4; + private maxThreads: number = 2; - public uploadFile(file: File) { + public uploadFile(file: FileUpload) { console.debug("Adding upload to queue") this.uploadQueue.push(file); - if (this.uploadThreads.length < 4) { + if (this.uploadThreads.length < this.maxThreads) { console.debug("Starting upload thread") - setTimeout(new UploadWorker(this).start(), 0) // Start a new upload thread + let thread = new UploadWorker(this) + this.uploadThreads.push(thread) + setTimeout(thread.start(), 0) // Start a new upload thread + } else { + for (var i = 0; i < this.uploadThreads.length; i++) { + this.uploadThreads[i].startIfInactive() + } } } - public uploadFileList(files: FileList) { - for (var i = 0; i < files.length; i++) { - this.uploadFile(files.item(i)) - } - } - public grabFile(): File | undefined { + public grabFile(): FileUpload | undefined { if (this.uploadQueue.length > 0) { - return this.uploadQueue.pop() + return this.uploadQueue.shift() } else { return undefined } @@ -28,8 +34,9 @@ class UploadManager { } class UploadWorker { - private manager: UploadManager - private tries: number + private manager: UploadManager + private tries: number = 0 + private uploading: boolean = false constructor(manager: UploadManager) { this.manager = manager @@ -37,21 +44,30 @@ class UploadWorker { public start() { var file = this.manager.grabFile() - if (file === null) { - console.debug("No file") + 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) + this.upload(file) + } + public startIfInactive(){ + if (!this.uploading) { + this.start() + } } - private upload(file: File){ - console.debug("Starting upload of " + file.name) + private upload(file: FileUpload){ + console.debug("Starting upload of " + file.file.name) var formData = new FormData() - formData.append('file', file) - formData.append("name", file.name) + formData.append('file', file.file) + formData.append("name", file.file.name) + + var that = this // jquery changes the definiton of "this" $.ajax({ url: "/api/file", @@ -61,22 +77,35 @@ class UploadWorker { 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) console.log("Done: " + data.id) - this.setHistoryCookie(data.id) + that.setHistoryCookie(data.id) + + that.start() // Continue uploading on this thread }, error: function (xhr, status, error){ console.log(status) console.log(error) - if (this.tries === 3) { + if (that.tries === 3) { alert("Upload failed: " + status); + that.uploading = false return; // Upload failed } // Try again - this.tries++ - this.upload(file) + that.tries++ + that.upload(file) } }); } diff --git a/res/template/home.html b/res/template/home.html index e0af961..bccebf0 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -34,25 +34,18 @@ - Header image + Header image
{{template "menu"}}
- - -
+ + +
-
- -
- -
-
- -
+
- +

Pixeldrain Public Beta

@@ -144,7 +137,7 @@ - + {{template "analytics"}}