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

Added token submission to frontpage

This commit is contained in:
pitu 2017-01-14 19:24:32 -03:00
parent 0e0a1c6f35
commit f4b8544f69
3 changed files with 81 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/style.css
View File

@ -50,6 +50,8 @@ div#dropzone:hover {
color: #fff;
}
div#uploads, p#tokenContainer { display: none; }
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 }

12
public/index.html
View File

@ -24,9 +24,15 @@
<div class="columns">
<div class="column"></div>
<div class="column">
<a class="button is-danger is-outlined" id='btnGithub' href='https://github.com/kanadeko/loli-safe' target='_blank'>View on Github</a>
<div id="dropzone">Click here or drag and drop files</div>
<div class="column" id='uploadContainer'>
<p id='tokenContainer' class="control has-addons has-addons-centered">
<input id='token' class="input is-danger" type="text" placeholder="Your upload token">
<a id='tokenSubmit' class="button is-danger">Check</a>
</p>
<a id='btnGithub' class="button is-danger is-outlined" href='https://github.com/kanadeko/loli-safe' target='_blank'>View on Github</a>
</div>
<div class="column"></div>
</div>

114
public/js/upload.js
View File

@ -1,53 +1,79 @@
var maxSize = '512';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
if(xhr.responseText !== 'not-authorized'){
document.getElementById('btnGithub').style.display = 'none';
document.getElementById('dropzone').style.display = 'flex';
}
if(xhr.responseText.maxFileSize)
maxSize = xhr.responseText.maxFileSize;
}
}
xhr.open('GET', '/api/info', true);
xhr.send(null);
window.onload = function () {
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var maxSize = '512';
var dropzone = new Dropzone('div#dropzone', {
url: '/api/upload',
paramName: 'file',
maxFilesize: maxSize,
parallelUploads: 2,
uploadMultiple: false,
previewsContainer: 'div#uploads',
previewTemplate: previewTemplate,
createImageThumbnails: false,
maxFiles: 1000,
autoProcessQueue: true
});
if(!localStorage.token){
document.getElementById('tokenContainer').style.display = 'flex'
document.getElementById("tokenSubmit").addEventListener("click", function(){
getInfo(document.getElementById("token").value)
});
}else{
getInfo(localStorage.token);
}
// Update the total progress bar
dropzone.on("uploadprogress", function(file, progress) {
file.previewElement.querySelector(".progress").style.width = progress + "%";
});
function prepareDropzone(){
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 = response.url;
a.target = '_blank';
a.innerHTML = response.filename;
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
file.previewTemplate.querySelector(".progress").style.display = 'none';
file.previewTemplate.querySelector(".link").appendChild(a);
});
var dropzone = new Dropzone('div#dropzone', {
url: '/api/upload',
paramName: 'file',
maxFilesize: maxSize,
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 = response.url;
a.target = '_blank';
a.innerHTML = response.filename;
file.previewTemplate.querySelector(".progress").style.display = 'none';
file.previewTemplate.querySelector(".link").appendChild(a);
});
}
function getInfo(token) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
if(xhr.responseText !== 'not-authorized'){
div = document.createElement('div');
div.id = 'dropzone';
div.innerHTML = 'Click here or drag and drop files';
div.style.display = 'flex';
document.getElementById('btnGithub').style.display = 'none';
document.getElementById('tokenContainer').style.display = 'none';
document.getElementById('uploadContainer').appendChild(div);
if(xhr.responseText.maxFileSize) maxSize = xhr.responseText.maxFileSize;
if(token) localStorage.token = token;
prepareDropzone();
}
}
}
xhr.open('GET', '/api/info', true);
xhr.setRequestHeader('auth', token);
xhr.send(null);
}
};