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

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

@@ -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("<form>").closest("form").get(0).reset();
$("#fileInputField").wrap("<form>").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);

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

@@ -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);

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

@@ -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 = <FileList> 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("<form>").closest("form").get(0).reset();
(<HTMLFormElement>$("#fileInputField").wrap("<form>").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

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

@@ -1,17 +1,29 @@
class UploadManager {
private uploadQueue: Array<File>;
private uploadThreads: Array<UploadWorker>;
private uploadQueue: Array<File> = new Array();
private uploadThreads: Array<UploadWorker> = 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>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)

2
res/template/home.html
View File

@@ -38,7 +38,7 @@
<div id="body" class="body">
{{template "menu"}}
<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="textButton" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/>