From 07ba404dcbdeebf02def41978a0520065bc99ead Mon Sep 17 00:00:00 2001 From: kanadeko Date: Sat, 14 Jan 2017 03:01:23 -0300 Subject: Frontend WIP --- public/.DS_Store | Bin 0 -> 8196 bytes public/error/404.html | 1 + public/images/logo.png | Bin 0 -> 157334 bytes public/images/logo_big.png | Bin 0 -> 4245986 bytes public/index.html | 153 ++++++++++++++++++++++++++++++++++++++++++++ public/js/envResolver.js | 83 ++++++++++++++++++++++++ public/js/pureupload.min.js | 1 + public/js/queueRenderer.js | 87 +++++++++++++++++++++++++ 8 files changed, 325 insertions(+) create mode 100644 public/.DS_Store create mode 100644 public/error/404.html create mode 100644 public/images/logo.png create mode 100644 public/images/logo_big.png create mode 100644 public/index.html create mode 100644 public/js/envResolver.js create mode 100755 public/js/pureupload.min.js create mode 100644 public/js/queueRenderer.js (limited to 'public') diff --git a/public/.DS_Store b/public/.DS_Store new file mode 100644 index 0000000..213a4b9 Binary files /dev/null and b/public/.DS_Store differ diff --git a/public/error/404.html b/public/error/404.html new file mode 100644 index 0000000..57db2e9 --- /dev/null +++ b/public/error/404.html @@ -0,0 +1 @@ +404 \ No newline at end of file diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 0000000..96916c0 Binary files /dev/null and b/public/images/logo.png differ diff --git a/public/images/logo_big.png b/public/images/logo_big.png new file mode 100644 index 0000000..b935a28 Binary files /dev/null and b/public/images/logo_big.png differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..f0a7e03 --- /dev/null +++ b/public/index.html @@ -0,0 +1,153 @@ + + + + loli-safe - A self hosted upload service + + + + + + + + +

+ +

+ loli-safe +

+ A modern self-hosted file upload service +

+ +

+ Upload files +

+ +

Or drag and drop files here

+ +

+ + + + + \ No newline at end of file diff --git a/public/js/envResolver.js b/public/js/envResolver.js new file mode 100644 index 0000000..a7419b4 --- /dev/null +++ b/public/js/envResolver.js @@ -0,0 +1,83 @@ +var http = function (url, success, failure) { + var request = new XMLHttpRequest(); + request.open("GET", url, true); + request.send(null); + request.onreadystatechange = function () { + if (request.readyState == 4) { + if (request.status == 200) + success(request.responseText); + else if (failure) + failure(request.status, request.statusText); + } + }; +}; +var mockXhr = function () { + XMLHttpRequest = XhrMock; + FormData = FormDataMock; +}; +var resolveEnvironment = function () { + if (window.location.href.toString().toLowerCase().indexOf('file://') >= 0) { + mockXhr(); + return; + } + http('api/check', function (result) { + if (result !== 'API OK') + mockXhr(); + }, function () { + mockXhr(); + }); +}; +var FormDataMock = (function () { + function FormDataMock() { + this.data = {}; + } + FormDataMock.prototype.append = function (key, data, additional) { + this.data[key] = { data: data, additional: additional }; + }; + return FormDataMock; +})(); +var XhrMock = (function () { + function XhrMock() { + this.loaded = 0; + this.step = 2000000; + this.readyState = 0; + this.status = 0; + this.upload = { onprogress: function () { } }; + } + XhrMock.prototype.open = function (method, url, async) { + }; + XhrMock.prototype.setRequestHeader = function (name, value) { + }; + XhrMock.prototype.send = function (formData) { + this.file = formData.data['file'].data; + this.performStep(); + }; + XhrMock.prototype.abort = function () { + window.clearTimeout(this.timeoutId); + }; + XhrMock.prototype.performStep = function () { + var _this = this; + this.timeoutId = window.setTimeout(function () { + if (_this.addStep() === _this.file.size) { + _this.readyState = 4; + _this.status = 200; + _this.onload(new Event('loaded')); + } + else { + var e = { + lengthComputable: true, + loaded: _this.loaded, + total: _this.file.size + }; + _this.upload.onprogress(e); + _this.performStep(); + } + }, 100); + }; + XhrMock.prototype.addStep = function () { + var newValue = this.loaded + this.step; + this.loaded = newValue > this.file.size ? this.file.size : newValue; + return this.loaded; + }; + return XhrMock; +})(); diff --git a/public/js/pureupload.min.js b/public/js/pureupload.min.js new file mode 100755 index 0000000..508ffb6 --- /dev/null +++ b/public/js/pureupload.min.js @@ -0,0 +1 @@ +var pu;!function(t){function e(t,e,i){if(t.addEventListener)t.addEventListener(e,i);else{var o=t;o.attachEvent?o.attachEvent("on"+e,i):o[e]=i}}function i(t,e){var i;return i="object"==typeof t?c(o(u(t),function(t){return"length"!==t}),function(e){return t[e]}):t,n(i,function(t){t.uploadStatus=e||t.uploadStatus,t.responseCode=t.responseCode||0,t.responseText=t.responseText||"",t.progress=t.progress||0,t.sentBytes=t.sentBytes||0,t.cancel=t.cancel||function(){}}),i}function o(t,e){var i=[];return t?(n(t,function(t){e(t)&&i.push(t)}),i):i}function n(t,e){if(t)for(var i=0;ie||0===t.size)},o.prototype.isFileTypeInvalid=function(t){if(t.name&&this.options.accept&&("*"!==this.options.accept.trim()||"*.*"!==this.options.accept.trim())&&this.options.validateExtension&&this.options.accept.indexOf("/")===-1){var e=this.options.accept.split(","),i=t.name.substring(t.name.lastIndexOf("."),t.name.length);if(i.indexOf(".")===-1)return!0;for(var o=!0,n=0;n=0&&(this.uploadAreas[e].destroy(),this.uploadAreas.splice(e,1))},t}();t.Uploader=m;var F=function(){function e(t,e){this.queuedFiles=[],this.options=t,this.callbacks=e,this.setFullOptions(),this.setFullCallbacks()}return e.prototype.addFiles=function(t){var e=this;n(t,function(t){e.queuedFiles.push(t),t.remove=s(t.remove,function(){e.removeFile(t)}),e.callbacks.onFileAddedCallback&&e.callbacks.onFileAddedCallback(t),t.uploadStatus===g.failed?e.callbacks.onErrorCallback&&e.callbacks.onErrorCallback(t):t.uploadStatus=g.queued}),this.filesChanged()},e.prototype.removeFile=function(t,e){void 0===e&&(e=!1);var i=p(this.queuedFiles,t);i<0||(this.deactivateFile(t),this.queuedFiles.splice(i,1),this.callbacks.onFileRemovedCallback&&this.callbacks.onFileRemovedCallback(t),e||this.filesChanged())},e.prototype.clearFiles=function(t,e){var i=this;void 0===t&&(t=[]),void 0===e&&(e=!1),e||(t=t.concat([g.queued,g.uploading])),n(o(this.queuedFiles,function(e){return p(t,e.uploadStatus)<0}),function(t){return i.removeFile(t,!0)}),this.callbacks.onQueueChangedCallback&&this.callbacks.onQueueChangedCallback(this.queuedFiles)},e.prototype.filesChanged=function(){this.options.autoRemove&&this.removeFinishedFiles(),this.options.autoStart&&this.startWaitingFiles(),this.callbacks.onQueueChangedCallback&&this.callbacks.onQueueChangedCallback(this.queuedFiles),this.checkAllFinished()},e.prototype.checkAllFinished=function(){var t=o(this.queuedFiles,function(t){return p([g.queued,g.uploading],t.uploadStatus)>=0});0===t.length&&this.callbacks.onAllFinishedCallback&&this.callbacks.onAllFinishedCallback()},e.prototype.setFullOptions=function(){this.options.maxParallelUploads=this.options.maxParallelUploads||0,this.options.autoStart=t.isFileApi&&(this.options.autoStart||!1),this.options.autoRemove=this.options.autoRemove||!1},e.prototype.setFullCallbacks=function(){var t=this;this.callbacks.onFileAddedCallback=this.callbacks.onFileAddedCallback||function(){},this.callbacks.onFileRemovedCallback=this.callbacks.onFileRemovedCallback||function(){},this.callbacks.onAllFinishedCallback=this.callbacks.onAllFinishedCallback||function(){},this.callbacks.onQueueChangedCallback=this.callbacks.onQueueChangedCallback||function(){},this.callbacks.onFileStateChangedCallback=function(){return t.filesChanged()}},e.prototype.startWaitingFiles=function(){n(this.getWaitingFiles(),function(t){return t.start()})},e.prototype.removeFinishedFiles=function(){var t=this;n(o(this.queuedFiles,function(t){return p([g.uploaded,g.canceled],t.uploadStatus)>=0}),function(e){return t.removeFile(e,!0)})},e.prototype.deactivateFile=function(t){t.uploadStatus===g.uploading&&t.cancel(),t.uploadStatus=g.removed,t.cancel=function(){},t.remove=function(){},t.start=function(){}},e.prototype.getWaitingFiles=function(){if(!this.options.autoStart)return[];var t=o(this.queuedFiles,function(t){return t.uploadStatus===g.queued});if(this.options.maxParallelUploads>0){var e=o(this.queuedFiles,function(t){return t.uploadStatus===g.uploading}).length,i=this.options.maxParallelUploads-e;if(i<=0)return[];t=t.slice(0,i)}return t},e}();t.UploadQueue=F;var g;!function(t){t[t.queued=0]="queued",t[t.uploading=1]="uploading",t[t.uploaded=2]="uploaded",t[t.failed=3]="failed",t[t.canceled=4]="canceled",t[t.removed=5]="removed"}(g=t.UploadStatus||(t.UploadStatus={}))}(pu||(pu={})); \ No newline at end of file diff --git a/public/js/queueRenderer.js b/public/js/queueRenderer.js new file mode 100644 index 0000000..ae06531 --- /dev/null +++ b/public/js/queueRenderer.js @@ -0,0 +1,87 @@ +var getQueueRenderer = function () { + return new QueueRenderer(); +}; +var QueueRenderer = (function () { + function QueueRenderer() { + } + QueueRenderer.prototype.createTextDiv = function (className, value) { + var element = document.createElement("div"); + element.className = className; + element.innerHTML = value; + return element; + }; + QueueRenderer.prototype.createButton = function (value, callback) { + var element = document.createElement("button"); + element.className = "table-row-button"; + element.innerHTML = value; + element.addEventListener("click", callback); + return element; + }; + QueueRenderer.prototype.createQueueRow = function (file, queueSettings) { + var itemRow = document.createElement("div"); + itemRow.id = file.guid; + itemRow.className = "table-row-item"; + this.renderQueueRowContent(itemRow, file, queueSettings); + return itemRow; + }; + QueueRenderer.prototype.translateFileStatus = function (file) { + console.log(file) + console.log(pu) + switch (file.uploadStatus.toString()) { + case pu.UploadStatus.queued: + return "Queued"; + case pu.UploadStatus.uploading: + return "Uploading"; + case pu.UploadStatus.uploaded: + return "Uploaded"; + case pu.UploadStatus.failed: + return "Failed"; + case pu.UploadStatus.canceled: + return "Canceled"; + } + return "Unknown"; + }; + QueueRenderer.prototype.renderQueueRowContent = function (itemRow, file, queueSettings) { + while (itemRow.firstChild) + itemRow.removeChild(itemRow.firstChild); + itemRow.appendChild(this.createTextDiv('table-row-item-status', this.translateFileStatus(file))); + itemRow.appendChild(this.createTextDiv('table-row-item-name', file.name)); + itemRow.appendChild(this.createTextDiv('table-row-item-progress', file.progress.toString() + "%")); + switch (file.uploadStatus.toString()) { + case pu.UploadStatus.queued: + if (!queueSettings.autoStart) { + itemRow.appendChild(this.createButton("Start", function () { return file.start(); })); + break; + } + case pu.UploadStatus.uploading: + itemRow.appendChild(this.createButton("Cancel", function () { return file.cancel(); })); + break; + case pu.UploadStatus.uploaded: + case pu.UploadStatus.failed: + case pu.UploadStatus.canceled: + itemRow.appendChild(this.createButton("Delete", function () { return file.remove(); })); + break; + } + }; + QueueRenderer.prototype.renderItemProgress = function (queueId, file) { + var itemRow = document.getElementById(file.guid); + for (var i = 0; i < itemRow.childNodes.length; i++) { + var node = itemRow.childNodes[i]; + if (node.attributes.getNamedItem('class').value == 'table-row-item-progress') { + node.textContent = file.progress.toString() + "%"; + break; + } + } + }; + QueueRenderer.prototype.renderQueue = function (queueId, queueTitle, files, queueSettings) { + var _this = this; + var queue = document.getElementById(queueId); + while (queue.firstChild) + queue.removeChild(queue.firstChild); + queue.appendChild(this.createTextDiv("table-header-title", queueTitle)); + files.forEach(function (file) { + queue.appendChild(_this.createQueueRow(file, queueSettings)); + }); + }; + return QueueRenderer; +})(); -- cgit v1.2.3