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

View File

@ -50,6 +50,8 @@ div#dropzone:hover {
color: #fff; color: #fff;
} }
div#uploads, p#tokenContainer { display: none; }
img.logo { height: 200px; margin-top: 20px; } img.logo { height: 200px; margin-top: 20px; }
.dz-preview .dz-details { display: flex; } .dz-preview .dz-details { display: flex; }
.dz-preview .dz-details .dz-size, .dz-preview .dz-details .dz-filename { flex: 1 } .dz-preview .dz-details .dz-size, .dz-preview .dz-details .dz-filename { flex: 1 }

View File

@ -24,9 +24,15 @@
<div class="columns"> <div class="columns">
<div class="column"></div> <div class="column"></div>
<div class="column"> <div class="column" id='uploadContainer'>
<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> <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>
<div class="column"></div> <div class="column"></div>
</div> </div>

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 () { window.onload = function () {
var previewNode = document.querySelector("#template"); var maxSize = '512';
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var dropzone = new Dropzone('div#dropzone', { if(!localStorage.token){
url: '/api/upload', document.getElementById('tokenContainer').style.display = 'flex'
paramName: 'file', document.getElementById("tokenSubmit").addEventListener("click", function(){
maxFilesize: maxSize, getInfo(document.getElementById("token").value)
parallelUploads: 2, });
uploadMultiple: false, }else{
previewsContainer: 'div#uploads', getInfo(localStorage.token);
previewTemplate: previewTemplate, }
createImageThumbnails: false,
maxFiles: 1000,
autoProcessQueue: true
});
// Update the total progress bar function prepareDropzone(){
dropzone.on("uploadprogress", function(file, progress) {
file.previewElement.querySelector(".progress").style.width = progress + "%";
});
dropzone.on("success", function(file, response) { var previewNode = document.querySelector("#template");
// Handle the responseText here. For example, add the text to the preview element: previewNode.id = "";
a = document.createElement('a'); var previewTemplate = previewNode.parentNode.innerHTML;
a.href = response.url; previewNode.parentNode.removeChild(previewNode);
a.target = '_blank';
a.innerHTML = response.filename;
file.previewTemplate.querySelector(".progress").style.display = 'none'; var dropzone = new Dropzone('div#dropzone', {
file.previewTemplate.querySelector(".link").appendChild(a); 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);
}
}; };