首頁 探索 說明
登入
ghorsington
/
meidosafe
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

Frontend WIP

kanadeko 7 年之前
父節點
3f3505dee7
當前提交
07ba404dcb
共有 11 個文件被更改，包括 339 次插入 和 4 次删除
分割檢視 顯示文件統計
  1. 二進制
      .DS_Store
  2. 1 1
      controllers/uploadController.js
  3. 13 3
      lolisafe.js
  4. 二進制
      public/.DS_Store
  5. 1 0
      public/error/404.html
  6. 二進制
      public/images/logo.png
  7. 二進制
      public/images/logo_big.png
  8. 153 0
      public/index.html
  9. 83 0
      public/js/envResolver.js
  10. 1 0
      public/js/pureupload.min.js
  11. 87 0
      public/js/queueRenderer.js

二進制
.DS_Store
查看文件


+ 1 - 1
controllers/uploadController.js
查看文件 

@@ -37,7 +37,7 @@ uploadsController.upload = function(req, res, next){
 
 			file: req.file.filename,
 
 			galleryid: gallery
 
 		}).then(() => {
 
-			res.json({
 
+			return res.json({
 
 				'filename': req.file.filename
 
 			})
 
 		})

+ 13 - 3
lolisafe.js
查看文件 

@@ -9,9 +9,21 @@ fs.existsSync('./' + config.uploads.folder) || fs.mkdirSync('./' + config.upload
 
 fs.existsSync('./' + config.logsFolder) || fs.mkdirSync('./' + config.logsFolder)
 
 fs.existsSync('db') || fs.writeFile('db', '')
 
 
+safe.enable('trust proxy')
 
+
 
 safe.use('/', express.static('./uploads'))
 
+safe.use('/', express.static('./public'))
 
 safe.use('/api'  , routes)
 
-safe.use('/panel', express.static('./dashboard'))
 
+
 
+safe.use(function (req, res, next) {
 
+	res.status(404).sendFile('404.html', {
 
+		root: './public/error/',
 
+	})
 
+})
 
+
 
+safe.use(function (err, req, res, next) {
 
+	res.status(500).end()
 
+})
 
 
 // Create the tables we need to store galleries and files
 
 db.schema.createTableIfNotExists('gallery', function (table) {
 
@@ -26,6 +38,4 @@ db.schema.createTableIfNotExists('files', function (table) {
 
 	table.integer('galleryid')
 
 }).then(() => {})
 
 
-safe.enable('trust proxy')
 
-
 
 safe.listen(config.port, () => console.log(`loli-safe started on port ${config.port}`))

二進制
public/.DS_Store
查看文件


+ 1 - 0
public/error/404.html
查看文件 

@@ -0,0 +1 @@
 
+404

二進制
public/images/logo.png
查看文件


二進制
public/images/logo_big.png
查看文件


+ 153 - 0
public/index.html
查看文件 

@@ -0,0 +1,153 @@
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+		<title>loli-safe - A self hosted upload service</title>
 
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css">
 
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css">
 
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
 
+		
+		<style type="text/css">
 
+			#b {
 
+				-webkit-animation-delay: 0.5s;
 
+				animation-delay: 0.5s;
 
+				-webkit-animation-duration: 1.5s;
 
+				animation-duration: 1.5s;
 
+				-webkit-animation-fill-mode: both;
 
+				animation-fill-mode: both;
 
+				-webkit-animation-name: floatUp;
 
+				animation-name: floatUp;
 
+				-webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
 
+				animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
 
+				border-radius: 24px;
 
+				display: inline-block;
 
+				height: 240px;
 
+				margin-bottom: 40px;
 
+				position: relative;
 
+				vertical-align: top;
 
+				width: 240px;
 
+				box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
 
+			}
 
+			img.logo {
 
+				height: 200px;
 
+				margin-top: 20px;
 
+			}
 
+
 
+			.dz-preview .dz-details { display: flex; }
 
+			.dz-preview .dz-details .dz-size, .dz-preview .dz-details .dz-filename { flex: 1 }
 
+			.dz-preview img, .dz-preview .dz-success-mark, .dz-preview .dz-error-mark { display: none }
 
+
 
+			@keyframes floatUp {
 
+				0% {
 
+					opacity: 0;
 
+					box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
 
+					-webkit-transform: scale(0.86);
 
+					transform: scale(0.86);
 
+				}
 
+				25% {
 
+					opacity: 100;
 
+				}
 
+				67% {
 
+					box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
 
+					-webkit-transform: scale(1);
 
+					transform: scale(1);
 
+				}
 
+				100% {
 
+					box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
 
+					-webkit-transform: scale(1);
 
+					transform: scale(1);
 
+				}
 
+			}
 
+
 
+		</style>
 
+	</head>
 
+
 
+	<body>
 
+		<section class="hero is-fullheight has-text-centered">
 
+			<div class="hero-body">
 
+				<div class="container">
 
+					<p id="b">
 
+						<img class='logo' src="/images/logo.png">
 
+					</p>
 
+					<h1 id="bulma" class="title">
 
+						loli-safe
 
+					</h1>
 
+					<h2 id="modern-framework" class="subtitle">
 
+						A <strong>modern</strong> self-hosted file upload <strong>service</strong>
 
+					</h2>
 
+
 
+					<div class="columns">
 
+						<div class="column"></div>
 
+						<div class="column">
 
+							<a class="button is-danger is-outlined is-fullwidth" id="upload-button">Upload files</a>
 
+						</div>
 
+						<div class="column"></div>
 
+					</div>
 
+
 
+					<div class="columns">
 
+						<div class="column"></div>
 
+						<div class="column">
 
+							<div class="notification" id="dropzone">Or drag and drop files here</div>
 
+						</div>
 
+						<div class="column"></div>
 
+					</div>
 
+
 
+					<div id="uploads">
 
+						<div id="template" class="columns">
 
+							<div class="column">
 
+								<p data-dz-size></p>
 
+							</div>
 
+							<div class="column">
 
+								<p data-dz-name></p>
 
+							</div>
 
+							<div class="column">
 
+								<progress class="progress is-primary" value="100" max="100" data-dz-uploadprogress></progress>
 
+								<p data-dz-errormessage></p>
 
+								<p class="link"></p>
 
+							</div>
 
+						</div>
 
+					</div>
 
+
 
+				</div>
 
+			</div>
 
+		</section>
 
+
 
+		<script type="text/javascript">
 
+			window.onload = function () {
 
+				var previewNode = document.querySelector("#template");
 
+				previewNode.id = "";
 
+				var previewTemplate = previewNode.parentNode.innerHTML;
 
+				previewNode.parentNode.removeChild(previewNode);
 
+
 
+				var dropzone = new Dropzone('div#dropzone', { 
+					url: '/api/upload',
 
+					paramName: 'file',
 
+					maxFilesize: 512,
 
+					parallelUploads: 2,
 
+					uploadMultiple: false,
 
+					previewsContainer: 'div#uploads',
 
+					previewTemplate: previewTemplate,
 
+					createImageThumbnails: false,
 
+					maxFiles: 1000,
 
+					autoProcessQueue: true
 
+				});
 
+
 
+				// Update the total progress bar
 
+				dropzone.on("uploadprogress", function(file, progress) {
 
+					file.previewElement.querySelector(".progress").style.width = progress + "%";
 
+				});
 
+
 
+				dropzone.on("success", function(file, response) {
 
+      				// Handle the responseText here. For example, add the text to the preview element:
 
+      				a = document.createElement('a');
 
+      				a.href = 'https://i.kanacchi.moe/' + response.filename;
 
+      				a.innerHTML = response.filename;
 
+
 
+      				file.previewTemplate.querySelector(".progress").style.display = 'none';
 
+      				file.previewTemplate.querySelector(".link").appendChild(a);
 
+    			});
 
+
 
+			};
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 83 - 0
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;
 
+})();

文件差異過大導致無法顯示
+ 1 - 0
public/js/pureupload.min.js


+ 87 - 0
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;
 
+})();