2017-01-14 06:01:23 +00:00
|
|
|
<!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">
|
2017-01-14 08:50:18 +00:00
|
|
|
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
2017-01-14 06:01:23 +00:00
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
|
|
|
|
|
</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">
|
2017-01-14 09:06:01 +00:00
|
|
|
<a class="button is-danger is-outlined" id='btnGithub' href='https://github.com/kanadeko/loli-safe' target='_blank'>View on Github</a>
|
2017-01-14 08:50:18 +00:00
|
|
|
<div id="dropzone">Click here or drag and drop files</div>
|
2017-01-14 06:01:23 +00:00
|
|
|
</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">
|
2017-01-14 08:50:18 +00:00
|
|
|
|
|
|
|
|
var maxSize = '512';
|
|
|
|
|
var urlPrefix = '';
|
|
|
|
|
|
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
|
xhr.onreadystatechange = function() {
|
|
|
|
|
if (xhr.readyState == XMLHttpRequest.DONE) {
|
2017-01-14 09:06:01 +00:00
|
|
|
console.log(xhr.responseText)
|
|
|
|
|
if(xhr.responseText !== 'not-authorized'){
|
|
|
|
|
document.getElementById('btnGithub').style.display = 'none';
|
|
|
|
|
document.getElementById('dropzone').style.display = 'flex';
|
|
|
|
|
}
|
2017-01-14 08:50:18 +00:00
|
|
|
if(xhr.responseText.maxFileSize)
|
2017-01-14 09:06:01 +00:00
|
|
|
maxSize = xhr.responseText.maxFileSize;
|
2017-01-14 08:50:18 +00:00
|
|
|
if(xhr.responseText.urlPrefix)
|
2017-01-14 09:06:01 +00:00
|
|
|
urlPrefix = xhr.responseText.urlPrefix + '/';
|
2017-01-14 08:50:18 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
xhr.open('GET', '/api/info', true);
|
|
|
|
|
xhr.send(null);
|
|
|
|
|
|
2017-01-14 06:01:23 +00:00
|
|
|
window.onload = function () {
|
2017-01-14 08:50:18 +00:00
|
|
|
|
|
|
|
|
|
2017-01-14 06:01:23 +00:00
|
|
|
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',
|
2017-01-14 08:50:18 +00:00
|
|
|
maxFilesize: maxSize,
|
2017-01-14 06:01:23 +00:00
|
|
|
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) {
|
2017-01-14 08:50:18 +00:00
|
|
|
// Handle the responseText here. For example, add the text to the preview element:
|
|
|
|
|
a = document.createElement('a');
|
|
|
|
|
a.href = window.location.origin + '/' + urlPrefix + response.filename;
|
|
|
|
|
a.target = '_blank';
|
|
|
|
|
a.innerHTML = response.filename;
|
|
|
|
|
|
|
|
|
|
file.previewTemplate.querySelector(".progress").style.display = 'none';
|
|
|
|
|
file.previewTemplate.querySelector(".link").appendChild(a);
|
|
|
|
|
});
|
2017-01-14 06:01:23 +00:00
|
|
|
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
