diff --git a/.gitignore b/.gitignore index c0126c3..430d612 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .vscode main +pdwebconfig.toml diff --git a/Makefile b/Makefile index 5969fc9..6fe5919 100644 --- a/Makefile +++ b/Makefile @@ -1,9 +1,14 @@ run: ts go run main.go +runboth: ts + cd ../pixeldrain-server-launcher && go run main.go build: ts go build main.go -o pixeldrain-web +deps: + npm install -g typescript + ts: tsc --strict res/static/res/typescript/lib/*.ts --outFile res/static/res/script/pixellib.js tsc --strict res/static/res/typescript/home/*.ts \ diff --git a/res/static/res/script/home.js b/res/static/res/script/home.js index 3880cf7..31b5cae 100644 --- a/res/static/res/script/home.js +++ b/res/static/res/script/home.js @@ -1,20 +1,23 @@ "use strict"; +var uploader = null; /* * Form upload handlers */ $("#selectFileButton").click(function (event) { $("#fileInputField").click(); }); -$("#fileInputField").change(function () { - alert(typeof ($("#fileInputField")[0])); - //pushUploads($("#fileInputField")[0].files); +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").wrap("").closest("form").get(0).reset(); $("#fileInputField").unwrap(); -}); +} /* * Drag 'n Drop upload handlers */ @@ -26,16 +29,16 @@ $(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); -// } -// } -// }); +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 */ @@ -70,15 +73,29 @@ var Cookie; })(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) { - setTimeout(new UploadWorker(this), 0); // Start a new upload thread + 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 () { - return null; + if (this.uploadQueue.length > 0) { + return this.uploadQueue.pop(); + } + else { + return undefined; + } }; return UploadManager; }()); @@ -89,12 +106,14 @@ var UploadWorker = /** @class */ (function () { 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); diff --git a/res/static/res/script/pixellib.js b/res/static/res/script/pixellib.js index 38e65e6..e772a7f 100644 --- a/res/static/res/script/pixellib.js +++ b/res/static/res/script/pixellib.js @@ -23,15 +23,29 @@ var Cookie; })(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) { - setTimeout(new UploadWorker(this), 0); // Start a new upload thread + 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 () { - return null; + if (this.uploadQueue.length > 0) { + return this.uploadQueue.pop(); + } + else { + return undefined; + } }; return UploadManager; }()); @@ -42,12 +56,14 @@ var UploadWorker = /** @class */ (function () { 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); diff --git a/res/static/res/typescript/home/home.ts b/res/static/res/typescript/home/home.ts index 13fb7ae..fd3897d 100644 --- a/res/static/res/typescript/home/home.ts +++ b/res/static/res/typescript/home/home.ts @@ -1,4 +1,5 @@ +var uploader: UploadManager|null = null; /* * Form upload handlers @@ -8,18 +9,20 @@ $("#selectFileButton").click(function(event){ $("#fileInputField").click(); }); -$("#fileInputField").on('change', null, (e) => { - let field = e.target +function fileInputChange(dom: HTMLInputElement, files: FileList) { + if (uploader === null){ + uploader = new UploadManager() + } - //pushUploads($("#fileInputField")[0].files); + 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").wrap("").closest("form").get(0)).reset(); $("#fileInputField").unwrap(); -}); +} /* * Drag 'n Drop upload handlers @@ -32,18 +35,18 @@ $(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; +document.addEventListener('drop', function(e: DragEvent){ + if (e.dataTransfer && e.dataTransfer.files.length > 0) { + e.preventDefault(); + e.stopPropagation(); + + if (uploader === null){ + uploader = new UploadManager() + } -// if (len) { -// e.preventDefault(); -// e.stopPropagation(); - -// pushUploads(e.originalEvent.dataTransfer.files); -// } -// } -// }); + uploader.uploadFileList(e.dataTransfer.files); + } +}) /* * Upload functions diff --git a/res/static/res/typescript/lib/uploader.ts b/res/static/res/typescript/lib/uploader.ts index 3bde33a..62a3436 100644 --- a/res/static/res/typescript/lib/uploader.ts +++ b/res/static/res/typescript/lib/uploader.ts @@ -1,17 +1,29 @@ + class UploadManager { - private uploadQueue: Array; - private uploadThreads: Array; + private uploadQueue: Array = new Array(); + private uploadThreads: Array = new Array(); private maxThreads: 4; public uploadFile(file: File) { + console.debug("Adding upload to queue") this.uploadQueue.push(file); if (this.uploadThreads.length < 4) { - setTimeout(new UploadWorker(this), 0) // Start a new upload thread + console.debug("Starting upload thread") + setTimeout(new UploadWorker(this).start(), 0) // Start a new upload thread } } - public grabFile(): File | null { - return null + public uploadFileList(files: FileList) { + for (var i = 0; i < files.length; i++) { + this.uploadFile(files.item(i)) + } + } + public grabFile(): File | undefined { + if (this.uploadQueue.length > 0) { + return this.uploadQueue.pop() + } else { + return undefined + } } } @@ -26,14 +38,17 @@ class UploadWorker { public start() { var file = this.manager.grabFile() if (file === null) { + console.debug("No file") return // Stop the thread } this.tries = 0 - this.upload(file) + this.upload(file) } private upload(file: File){ + console.debug("Starting upload of " + file.name) + var formData = new FormData() formData.append('file', file) formData.append("name", file.name) diff --git a/res/template/home.html b/res/template/home.html index 9cce702..e0af961 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -38,7 +38,7 @@
{{template "menu"}}
- +