partage

Unnamed repository; edit this file 'description' to name the repository.
git clone git://git.z3bra.org/partage.git
Log | Files | Refs | README | LICENSE

commit 093030dc1c9e7a582ea13ae06ce0f5dab3a0b83d
parent d4af4d6a0ba8e52efe53cf715ee52e62a751e6dd
Author: Willy Goiffon <dev@z3bra.org>
Date:   Wed, 20 Oct 2021 18:09:09 +0200

Improve interface with simple drag and drop capability

Diffstat:
Astatic/dz.js | 85+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mstatic/partage.css | 45++++++++++++++++++++++++++++++++++++++++-----
Mtemplates/index.html | 26+++++++++++++++++++-------
3 files changed, 144 insertions(+), 12 deletions(-)

diff --git a/static/dz.js b/static/dz.js @@ -0,0 +1,85 @@ +// Handle drag and drop into a dropzone_element div: +// send the files as a POST request to the server +"use strict"; + +// Only start once the DOM tree is ready +if(document.readyState === "complete") { + setupzone(); +} else { + document.addEventListener("DOMContentLoaded", setupzone); +} + +function setupzone() { + let dropzone = document.getElementById("dropzone"); + let fileinput = document.getElementById("filebox"); + let fallbackform = document.getElementById("fallbackform"); + + fallbackform.style.display = "none"; + + dropzone.className = "dropzone"; + dropzone.innerHTML = "Click or drop file(s)"; + + dropzone.onclick = function() { + fileinput.click() + return false; + } + + dropzone.ondragover = function() { + this.className = "dropzone dragover"; + return false; + } + + dropzone.ondragleave = function() { + this.className = "dropzone"; + return false; + } + + dropzone.ondrop = function(e) { + // Stop browser from simply opening that was just dropped + e.preventDefault(); + // Restore original dropzone appearance + this.className = "dropzone"; + sendfiles(e.dataTransfer.files) + } + + fileinput.onchange = function(e) { + sendfiles(this.files) + } +} + +function sendfiles(files) { + let uploads = document.getElementById("uploads"); + let progressbar = document.createElement("progress"); + let uploadlist = document.createElement("ul"); + let formData = new FormData(), xhr = new XMLHttpRequest(); + + uploads.appendChild(progressbar); + uploads.appendChild(uploadlist); + + formData.append("expiry", 10); + for(let i=0; i < files.length; i++) { + formData.append("file", files[i]); + } + + // triggers periodically + xhr.upload.onprogress = function(e) { + // e.loaded - how many bytes downloaded + // e.lengthComputable = true if the server sent Content-Length header + // e.total - total number of bytes (if lengthComputable) + + } + + xhr.onreadystatechange = function() { + if(xhr.readyState === XMLHttpRequest.DONE) { + progressbar.remove(); + this.response.split(/\r?\n/).forEach(function(link) { + let li = document.createElement("li"); + li.innerHTML = `<a href="${link}">${link}</a>`; + uploadlist.appendChild(li); + }); + } + } + + xhr.open('POST', window.location.href, true); // async = true + xhr.send(formData); +} diff --git a/static/partage.css b/static/partage.css @@ -2,9 +2,9 @@ body { padding: 5%; margin: auto; max-width: 540px; - text-align: center; font-family: serif; font-size: 1.5rem; + text-align: center; background-color: #eeeeee; color: #222222; } @@ -17,10 +17,46 @@ header { align-content: center; } +section { + display: flex; + justify-content: flex-end; + font-size: initial; +} + +section#formsettings > * { + margin-top: 20px; + margin-left: 20px; +} -img#logo { height: 100%; max-height: 30vh; } -h1 { font-size: 4.5rem; } -ul { list-style: none; padding: 0; } +img#logo { + height: 100%; + max-height: 30vh; +} + +h1 { + font-size: 4.0rem; +} + +ul { + list-style: none; + text-align: left; + display: inline-block; +} + +.dropzone { + padding-top: 60px; + padding-bottom: 60px; + border: 2px dashed #888888; + border-radius: 8px; + text-align: center; + margin: auto; + color: #888888; +} + +.dropzone.dragover { + color: #222222; + border-color: #222222; +} /* font attributes are not inherited by default */ input, input::file-selector-button { @@ -56,4 +92,3 @@ input, input::file-selector-button { background-color: #222222; } } - diff --git a/templates/index.html b/templates/index.html @@ -14,14 +14,26 @@ <img id="logo" src="/partage.png" /> <h1>partage</h1> </header> - <p> - Use the box below to upload and share files. File size is - limited to {{.Maxsize}}. - </p> <form enctype="multipart/form-data" method="post"> - <input id="uck" name="uck" type="file" multiple/> - <input id="output" name="output" type="hidden" value='html' /> - <input type="submit" value="...Share"/> + <div id="dropzone"></div> + <div id="fallbackform" class="dropzone"> + <input id="filebox" name="file" type="file" multiple/> + <input id="output" name="output" type="hidden" value='html' /> + <input type="submit" value="Upload"/> + </div> + <section id="formsettings"> + <label for="expiry"> Destroy after </label> + <select id="expiry" name="expiry"> + <option value="900"> 15 minutes </option> + <option value="3600"> 1 hour </option> + <option value="28800"> 8 hours </option> + <option value="86400" selected> 1 day </option> + <option value="604800"> 1 week </option> + </select> + </section> </form> + <p>File size limited to {{.Maxsize}}.</p> + <div id="uploads"></div> + <script src="/dz.js"></script> </body> </html>