Peps
/
v3.0.0
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Frontend WIP

This commit is contained in:
kanadeko 2017-01-14 03:01:23 -03:00
parent 3f3505dee7
commit 07ba404dcb
11 changed files with 339 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

2
controllers/uploadController.js
View File

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

16
lolisafe.js
View File

@ -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}`))

BIN
public/.DS_Store vendored Normal file
View File

Binary file not shown.

1
public/error/404.html Normal file
View File

@ -0,0 +1 @@
404

BIN
public/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
public/images/logo_big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

153
public/index.html Normal file
View File

@ -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
public/js/envResolver.js Normal file
View File

@ -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
public/js/pureupload.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

87
public/js/queueRenderer.js Normal file
View File

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