From b5af1a221ebbc8f713ba01b61f308262f95bbf97 Mon Sep 17 00:00:00 2001 From: Marvin Borner Date: Thu, 16 May 2019 21:18:32 +0200 Subject: Added manual file upload support and fixed some bugs Co-authored-by: LarsVomMars --- src/main/resources/css/files.css | 30 ++++++- src/main/resources/js/files.js | 132 ++++++++++++++++++++--------- src/main/resources/js/index.js | 14 +-- src/main/resources/views/files.rocker.html | 6 ++ 4 files changed, 135 insertions(+), 47 deletions(-) (limited to 'src/main') diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css index 2b8e510..4131830 100644 --- a/src/main/resources/css/files.css +++ b/src/main/resources/css/files.css @@ -2,7 +2,34 @@ transition: all .2s linear; } +input[type="file"] { + display: none; +} + +.upload { + position: absolute; + margin: 20px; + right: 0; + top: 0; + padding: 8px; + border: 1px solid #ccc; + font-size: 1em; + width: 1em; + text-align: center; + line-height: 1em; + cursor: pointer; + border-radius: 100px; +} + +.upload[for="file"] { + right: 3em; +} + .navigation { + white-space: nowrap; + max-width: calc(100% - 6em); + overflow: hidden; + text-overflow: ellipsis; position: relative; padding: 0; } @@ -14,8 +41,9 @@ .progress { display: none; - color: green; float: right; + color: green; + margin-right: 6em; } table { diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js index 9c8c135..d3ce6c4 100644 --- a/src/main/resources/js/files.js +++ b/src/main/resources/js/files.js @@ -2,18 +2,18 @@ * Drag and drop */ const drop = document.getElementById("drop"); -drop.addEventListener('dragover', e => { +drop.addEventListener("dragover", e => { e.stopPropagation(); e.preventDefault(); - e.dataTransfer.dropEffect = 'copy'; + e.dataTransfer.dropEffect = "copy"; drop.classList.add("hover"); }); -drop.addEventListener('dragleave', () => +drop.addEventListener("dragleave", () => drop.classList.remove("hover") ); -drop.addEventListener('drop', e => { +drop.addEventListener("drop", e => { e.stopPropagation(); e.preventDefault(); drop.classList.remove("hover"); @@ -42,45 +42,50 @@ drop.addEventListener('drop', e => { setListeners(); - iterateFiles(item, files => { - const progress = document.getElementById("progress"); - const request = new XMLHttpRequest(); - const formData = new FormData(); + iterateFiles(item, files => upload(files)) + } +}, false); - for (const file of files) - formData.append('file', file); +document.getElementById("directory").addEventListener("change", () => { + const files = document.getElementById("directory").files; + let dirName = ""; + + for (const file of files) dirName = file.webkitRelativePath.slice(0, file.webkitRelativePath.indexOf("/")) + "/"; + + const date = new Date(); + const row = document.getElementById("table").insertRow(-1); + row.setAttribute("data-href", dirName); + row.insertCell(0).innerHTML = ""; + row.insertCell(1).innerHTML = dirName; + row.insertCell(2).innerHTML = "? B"; + row.insertCell(3).innerHTML = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; + row.insertCell(4).innerHTML = ""; + row.insertCell(5).innerHTML = ""; + row.insertCell(6).innerHTML = ""; + setListeners(); + + upload(files); +}); - request.upload.onprogress = e => { - if (e.lengthComputable) { - progress.style.display = "block"; - progress.innerText = `Uploading ${files.length} file(s): ${(e.loaded / e.total * 100).toFixed(2)}%`; - } - }; +document.getElementById("file").addEventListener("change", () => { + const files = document.getElementById("file").files; - request.onreadystatechange = () => { - if (request.readyState === 4) { - if (request.status === 200) { - progress.innerText = "Finished uploading!"; - setTimeout(() => progress.style.display = "none", 3000) - } else { - progress.style.color = "red"; - progress.innerText = "An error occurred :("; - } - } - }; - - request.open('POST', `/upload/${path}`.clean(), true); - request.send(formData); - }); + for (const file of files) { + const date = new Date(); + const row = document.getElementById("table").insertRow(-1); + row.setAttribute("data-href", file.name); + row.insertCell(0).innerHTML = ""; + row.insertCell(1).innerHTML = file.name; + row.insertCell(2).innerHTML = bytesToSize(file.size); + row.insertCell(3).innerHTML = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; + row.insertCell(4).innerHTML = ""; + row.insertCell(5).innerHTML = ""; + row.insertCell(6).innerHTML = ""; } + setListeners(); - function bytesToSize(bytes) { - const sizes = ['B', 'KiB', 'MiB', 'GiB', 'TiB']; - if (bytes === 0) return '0 Byte'; - const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); - return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]; - } -}, false); + upload(files); +}); /** * Set up listeners @@ -229,6 +234,53 @@ function setListeners() { setListeners(); +/** + * Uploads an file array + * @param files + */ +function upload(files) { + const progress = document.getElementById("progress"); + const request = new XMLHttpRequest(); + const formData = new FormData(); + + for (const file of files) + formData.append('file', file); + + request.upload.onprogress = e => { + if (e.lengthComputable) { + progress.style.display = "block"; + progress.innerText = `Uploading ${files.length} file(s): ${(e.loaded / e.total * 100).toFixed(2)}%`; + } + }; + + request.onreadystatechange = () => { + if (request.readyState === 4) { + if (request.status === 200) { + progress.innerText = "Finished uploading!"; + setTimeout(() => progress.style.display = "none", 3000) + } else { + progress.style.color = "red"; + progress.innerText = "An error occurred :("; + } + } + }; + + request.open('POST', `/upload/${path}`.clean(), true); + request.send(formData); +} + +/** + * Returns bytes as human readable string + * @param bytes + * @returns {string} + */ +function bytesToSize(bytes) { + const sizes = ['B', 'KiB', 'MiB', 'GiB', 'TiB']; + if (bytes === 0) return '0 Byte'; + const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); + return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]; +} + /** * Iterates over files and directories * TODO: Add empty directory upload support @@ -237,7 +289,6 @@ setListeners(); */ function iterateFiles(item, callback) { const files = []; - console.log(item); (function iterate(subItem) { if (subItem.isDirectory) { const directoryReader = subItem.createReader(); @@ -249,7 +300,8 @@ function iterateFiles(item, callback) { }); } else subItem.file(file => { - const newName = subItem.fullPath.charAt(0) === '/' ? subItem.fullPath.substr(1) : subItem.fullPath; + const newName = location.pathname.split('/').slice(2).join('/') + + (subItem.fullPath.charAt(0) === '/' ? subItem.fullPath.substr(1) : subItem.fullPath); files.push(new File([file], newName, { lastModified: file.lastModified, lastModifiedDate: file.lastModifiedDate, diff --git a/src/main/resources/js/index.js b/src/main/resources/js/index.js index 4939622..6266978 100644 --- a/src/main/resources/js/index.js +++ b/src/main/resources/js/index.js @@ -1,6 +1,8 @@ -document.querySelector("#toggle").addEventListener("click", () => { - const request = new XMLHttpRequest(); - request.open("POST", "/user/theme"); - request.onload = () => location.reload(); - request.send(); -}); +if (document.querySelector("#toggle") !== null) { + document.querySelector("#toggle").addEventListener("click", () => { + const request = new XMLHttpRequest(); + request.open("POST", "/user/theme"); + request.onload = () => location.reload(); + request.send(); + }); +} diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html index 1bdf858..7e074c4 100644 --- a/src/main/resources/views/files.rocker.html +++ b/src/main/resources/views/files.rocker.html @@ -41,6 +41,12 @@ + + + + + + -- cgit v1.2.3