pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Got uploads working

Browse Source
This commit is contained in:
Wim Brand
2018-01-16 11:47:48 +01:00
parent b475c85ff1
commit 397056b931
7 changed files with 101 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,2 +1,3 @@
.vscode .vscode
main main
pdwebconfig.toml

5
Makefile
View File

@@ -1,9 +1,14 @@
run: ts run: ts
go run main.go go run main.go
runboth: ts
cd ../pixeldrain-server-launcher && go run main.go
build: ts build: ts
go build main.go -o pixeldrain-web go build main.go -o pixeldrain-web
deps:
npm install -g typescript
ts: ts:
tsc --strict res/static/res/typescript/lib/*.ts --outFile res/static/res/script/pixellib.js tsc --strict res/static/res/typescript/lib/*.ts --outFile res/static/res/script/pixellib.js
tsc --strict res/static/res/typescript/home/*.ts \ tsc --strict res/static/res/typescript/home/*.ts \

53
res/static/res/script/home.js
View File

@@ -1,20 +1,23 @@
"use strict"; "use strict";
var uploader = null;
/* /*
* Form upload handlers * Form upload handlers
*/ */
$("#selectFileButton").click(function (event) { $("#selectFileButton").click(function (event) {
$("#fileInputField").click(); $("#fileInputField").click();
}); });
$("#fileInputField").change(function () { function fileInputChange(dom, files) {
alert(typeof ($("#fileInputField")[0])); if (uploader === null) {
//pushUploads($("#fileInputField")[0].files); uploader = new UploadManager();
}
uploader.uploadFileList(files);
// This resets the file input field // This resets the file input field
// http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery // http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery
$('#fileName').html(""); $('#fileName').html("");
$("#fileUploadButton").css("visibility", "hidden"); $("#fileUploadButton").css("visibility", "hidden");
//$("#fileInputField").wrap("<form>").closest("form").get(0).reset(); $("#fileInputField").wrap("<form>").closest("form").get(0).reset();
$("#fileInputField").unwrap(); $("#fileInputField").unwrap();
}); }
/* /*
* Drag 'n Drop upload handlers * Drag 'n Drop upload handlers
*/ */
@@ -26,16 +29,16 @@ $(document).on('dragenter', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); });
// $(document).on('drop', function (e) { document.addEventListener('drop', function (e) {
// if (e.originalEvent.dataTransfer) { if (e.dataTransfer && e.dataTransfer.files.length > 0) {
// var len = e.originalEvent.dataTransfer.files.length; e.preventDefault();
// if (len) { e.stopPropagation();
// e.preventDefault(); if (uploader === null) {
// e.stopPropagation(); uploader = new UploadManager();
// pushUploads(e.originalEvent.dataTransfer.files); }
// } uploader.uploadFileList(e.dataTransfer.files);
// } }
// }); });
/* /*
* Upload functions * Upload functions
*/ */
@@ -70,15 +73,29 @@ var Cookie;
})(Cookie || (Cookie = {})); })(Cookie || (Cookie = {}));
var UploadManager = /** @class */ (function () { var UploadManager = /** @class */ (function () {
function UploadManager() { function UploadManager() {
this.uploadQueue = new Array();
this.uploadThreads = new Array();
} }
UploadManager.prototype.uploadFile = function (file) { UploadManager.prototype.uploadFile = function (file) {
console.debug("Adding upload to queue");
this.uploadQueue.push(file); this.uploadQueue.push(file);
if (this.uploadThreads.length < 4) { 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 () { UploadManager.prototype.grabFile = function () {
return null; if (this.uploadQueue.length > 0) {
return this.uploadQueue.pop();
}
else {
return undefined;
}
}; };
return UploadManager; return UploadManager;
}()); }());
@@ -89,12 +106,14 @@ var UploadWorker = /** @class */ (function () {
UploadWorker.prototype.start = function () { UploadWorker.prototype.start = function () {
var file = this.manager.grabFile(); var file = this.manager.grabFile();
if (file === null) { if (file === null) {
console.debug("No file");
return; // Stop the thread return; // Stop the thread
} }
this.tries = 0; this.tries = 0;
this.upload(file); this.upload(file);
}; };
UploadWorker.prototype.upload = function (file) { UploadWorker.prototype.upload = function (file) {
console.debug("Starting upload of " + file.name);
var formData = new FormData(); var formData = new FormData();
formData.append('file', file); formData.append('file', file);
formData.append("name", file.name); formData.append("name", file.name);

20
res/static/res/script/pixellib.js
View File

@@ -23,15 +23,29 @@ var Cookie;
})(Cookie || (Cookie = {})); })(Cookie || (Cookie = {}));
var UploadManager = /** @class */ (function () { var UploadManager = /** @class */ (function () {
function UploadManager() { function UploadManager() {
this.uploadQueue = new Array();
this.uploadThreads = new Array();
} }
UploadManager.prototype.uploadFile = function (file) { UploadManager.prototype.uploadFile = function (file) {
console.debug("Adding upload to queue");
this.uploadQueue.push(file); this.uploadQueue.push(file);
if (this.uploadThreads.length < 4) { 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 () { UploadManager.prototype.grabFile = function () {
return null; if (this.uploadQueue.length > 0) {
return this.uploadQueue.pop();
}
else {
return undefined;
}
}; };
return UploadManager; return UploadManager;
}()); }());
@@ -42,12 +56,14 @@ var UploadWorker = /** @class */ (function () {
UploadWorker.prototype.start = function () { UploadWorker.prototype.start = function () {
var file = this.manager.grabFile(); var file = this.manager.grabFile();
if (file === null) { if (file === null) {
console.debug("No file");
return; // Stop the thread return; // Stop the thread
} }
this.tries = 0; this.tries = 0;
this.upload(file); this.upload(file);
}; };
UploadWorker.prototype.upload = function (file) { UploadWorker.prototype.upload = function (file) {
console.debug("Starting upload of " + file.name);
var formData = new FormData(); var formData = new FormData();
formData.append('file', file); formData.append('file', file);
formData.append("name", file.name); formData.append("name", file.name);

35
res/static/res/typescript/home/home.ts
View File

@@ -1,4 +1,5 @@
var uploader: UploadManager|null = null;
/* /*
* Form upload handlers * Form upload handlers
@@ -8,18 +9,20 @@ $("#selectFileButton").click(function(event){
$("#fileInputField").click(); $("#fileInputField").click();
}); });
$("#fileInputField").on('change', null, (e) => { function fileInputChange(dom: HTMLInputElement, files: FileList) {
let field = <FileList> e.target if (uploader === null){
uploader = new UploadManager()
}
//pushUploads($("#fileInputField")[0].files); uploader.uploadFileList(files);
// This resets the file input field // This resets the file input field
// http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery // http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery
$('#fileName').html(""); $('#fileName').html("");
$("#fileUploadButton").css("visibility", "hidden"); $("#fileUploadButton").css("visibility", "hidden");
$("#fileInputField").wrap("<form>").closest("form").get(0).reset(); (<HTMLFormElement>$("#fileInputField").wrap("<form>").closest("form").get(0)).reset();
$("#fileInputField").unwrap(); $("#fileInputField").unwrap();
}); }
/* /*
* Drag 'n Drop upload handlers * Drag 'n Drop upload handlers
@@ -32,18 +35,18 @@ $(document).on('dragenter', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); });
// $(document).on('drop', function (e) { document.addEventListener('drop', function(e: DragEvent){
// if (e.originalEvent.dataTransfer) { if (e.dataTransfer && e.dataTransfer.files.length > 0) {
// var len = e.originalEvent.dataTransfer.files.length; e.preventDefault();
e.stopPropagation();
if (uploader === null){
uploader = new UploadManager()
}
// if (len) { uploader.uploadFileList(e.dataTransfer.files);
// e.preventDefault(); }
// e.stopPropagation(); })
// pushUploads(e.originalEvent.dataTransfer.files);
// }
// }
// });
/* /*
* Upload functions * Upload functions

27
res/static/res/typescript/lib/uploader.ts
View File

@@ -1,17 +1,29 @@
class UploadManager { class UploadManager {
private uploadQueue: Array<File>; private uploadQueue: Array<File> = new Array();
private uploadThreads: Array<UploadWorker>; private uploadThreads: Array<UploadWorker> = new Array();
private maxThreads: 4; private maxThreads: 4;
public uploadFile(file: File) { public uploadFile(file: File) {
console.debug("Adding upload to queue")
this.uploadQueue.push(file); this.uploadQueue.push(file);
if (this.uploadThreads.length < 4) { 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 { public uploadFileList(files: FileList) {
return null 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() { public start() {
var file = this.manager.grabFile() var file = this.manager.grabFile()
if (file === null) { if (file === null) {
console.debug("No file")
return // Stop the thread return // Stop the thread
} }
this.tries = 0 this.tries = 0
this.upload(file) this.upload(<File>file)
} }
private upload(file: File){ private upload(file: File){
console.debug("Starting upload of " + file.name)
var formData = new FormData() var formData = new FormData()
formData.append('file', file) formData.append('file', file)
formData.append("name", file.name) formData.append("name", file.name)

2
res/template/home.html
View File

@@ -38,7 +38,7 @@
<div id="body" class="body"> <div id="body" class="body">
{{template "menu"}} {{template "menu"}}
<div class="highlight_middle border-bottom"> <div class="highlight_middle border-bottom">
<input id="fileInputField" type="file" name="file" multiple='multiple'/> <input id="fileInputField" type="file" name="file" multiple="multiple" onchange="fileInputChange(this, event);"/>
<button id="selectFileButton" class="big_button button_highlight">Upload Files</button> <button id="selectFileButton" class="big_button button_highlight">Upload Files</button>
<button id="textButton" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/> <button id="textButton" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/>