Added multi layer directory upload support

Co-authored-by: LarsVomMars <lars@kroenner.eu>

6 files changed, 73 insertions, 63 deletions

diff --git a/src/main/kotlin/DatabaseController.kt b/src/main/kotlin/DatabaseController.kt
index bdbdc18..255b6e4 100644
--- a/src/main/kotlin/DatabaseController.kt
+++ b/src/main/kotlin/DatabaseController.kt
@@ -326,8 +326,7 @@ class DatabaseController {
                     false
                 }
             } catch (err: Exception) {
-                if (!isDirectoryBool) error(err)
-                true // Ugly solution
+                error(err)
             }
         }
     }
diff --git a/src/main/kotlin/FileController.kt b/src/main/kotlin/FileController.kt
index d62b4b4..070679f 100644
--- a/src/main/kotlin/FileController.kt
+++ b/src/main/kotlin/FileController.kt
@@ -98,20 +98,22 @@ class FileController {
      * Saves multipart media data into requested directory
      */
     fun upload(ctx: Context) {
-        val firstParam = ctx.splat(0) ?: ""
-        ctx.uploadedFiles("file").forEach { (_, content, name, _) ->
-            val path = if (firstParam.isEmpty()) name else "$firstParam/$name"
 
+        ctx.uploadedFiles("file").forEach { (_, content, name, _) ->
+            val fixedName = name.replace(":", "/") // "fix" for Firefox..
             val userId = userHandler.getVerifiedUserId(ctx)
             var addPath = ""
-            path.split("/").forEach {
+
+            // Directory sharing
+            fixedName.split("/").forEach {
                 addPath += "$it/"
-                if (!path.endsWith(it)) databaseController.addFile(addPath, userId, true)
+                if (!fixedName.endsWith(it)) databaseController.addFile(addPath, userId, true)
             }
-            if (databaseController.addFile(path, userId)) {
+
+            if (databaseController.addFile(fixedName, userId)) {
                 FileUtil.streamToFile(
                     content,
-                    "$fileHome/$userId/$path"
+                    "$fileHome/$userId/$fixedName"
                 )
             }
         }
@@ -186,6 +188,7 @@ class FileController {
             }
         } else {
             log.info("Unknown file!")
+            throw NotFoundResponse("Shared file couldn't be found.")
         }
     }
 
diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css
index d0be48e..ba47202 100644
--- a/src/main/resources/css/files.css
+++ b/src/main/resources/css/files.css
@@ -75,6 +75,10 @@ colgroup col:nth-child(7) {
     z-index: -1;
 }
 
+.drop.hover {
+    background: rgba(12, 99, 250, 0.3) !important;
+}
+
 .share {
     font-size: 20px;
     background-color: inherit;
diff --git a/src/main/resources/css/fileview.css b/src/main/resources/css/fileview.css
index 29d9a32..bc30926 100644
--- a/src/main/resources/css/fileview.css
+++ b/src/main/resources/css/fileview.css
@@ -2,7 +2,7 @@ html, body {
     overflow: visible;
 }
 
-.modify, .switch, .settings {
+.modify, .switch, .settings, .preview {
     display: none;
 }
 
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index a79cac3..00015c4 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -6,19 +6,18 @@ drop.addEventListener('dragover', e => {
     e.stopPropagation();
     e.preventDefault();
     e.dataTransfer.dropEffect = 'copy';
-    drop.style.background = "rgba(12,99,250,0.3)";
+    drop.classList.add("hover");
 });
 
 drop.addEventListener('dragleave', () =>
-    drop.style.background = "white"
+    drop.classList.remove("hover")
 );
 
 drop.addEventListener('drop', e => {
     e.stopPropagation();
     e.preventDefault();
-    drop.style.background = "white";
+    drop.classList.remove("hover");
     const items = e.dataTransfer.items;
-    const uploadedFiles = [];
 
     for (let i = 0; i < items.length; i++) {
         const item = items[i].webkitGetAsEntry();
@@ -43,56 +42,17 @@ drop.addEventListener('drop', e => {
 
         setListeners();
 
-        // TODO: Add empty directory upload support
-        const iterateFiles = subItem => {
-            if (subItem.isDirectory) {
-                let directoryReader = subItem.createReader();
-                directoryReader.readEntries(entries => {
-                    entries.forEach(entry => {
-                        iterateFiles(entry);
-                    });
-                });
-            } else {
-                subItem.file(subFile => {
-                    // TODO: Add support for nested directory upload with more than 1 layer - via webkitRelativePath on firefox?
-                    if (!uploadedFiles.includes(`/${path}/${file.name}/${subFile.name}`.clean())) {
-                        const formData = new FormData();
-                        const request = new XMLHttpRequest();
-
-                        request.upload.onprogress = e => {
-                            if (e.lengthComputable) {
-                                console.log(`${subFile.name}: ${e.loaded / e.total * 100}%`)
-                            }
-                        };
-
-                        uploadedFiles.push(`/${path}/${file.name}/${subFile.name}`.clean());
-                        formData.append("file", subFile);
-                        if (subFile.webkitRelativePath === "") request.open("POST", `/upload/${path}/${file.name}`.clean());
-                        else request.open("POST", `/upload/${path}`.clean());
-                        request.send(formData);
-                    }
-                })
-            }
-        };
+        iterateFiles(item, files => {
+            const request = new XMLHttpRequest();
+            const formData = new FormData();
 
-        if (item.isDirectory) {
-            iterateFiles(item);
-        } else {
-            if (!uploadedFiles.includes(`/${path}/${file.name}`.clean())) {
-                const formData = new FormData();
-                const request = new XMLHttpRequest();
+            for (const file of files)
+                formData.append('file', file);
 
-                request.upload.onprogress = e => {
-                    if (e.lengthComputable) {
-                        console.log(`${file.name}: ${e.loaded / e.total * 100}%`)
-                    }
-                };
+            request.open('POST', `/upload/${path}`.clean(), true);
+            request.send(formData);
 
-                formData.append("file", file);
-                request.open("POST", `/upload/${path}`.clean());
-                request.send(formData);
-            }
-        }
+        });
     }
 
     function bytesToSize(bytes) {
@@ -138,7 +98,7 @@ function setListeners() {
             const audio = ["mp3", "m4a", "wav", "ogg"];
 
             const filename = element.getAttribute("data-path");
-            const extension = /(?:\.([^.]+))?$/.exec(filename)[1].toLowerCase();
+            const extension = (/(?:\.([^.]+))?$/.exec(filename)[1] || "").toLowerCase();
 
             if (images.includes(extension)) {
                 element.setAttribute("data-bp", filename);
@@ -251,7 +211,52 @@ function setListeners() {
 setListeners();
 
 /**
+ * Iterates over files and directories
+ * @param item
+ * @param callback
+ */
+// TODO: Add empty directory upload support
+const files = [];
+
+function iterateFiles(item, callback) {
+    console.log(item);
+    (function iterate(subItem) {
+        console.log(subItem);
+        if (subItem.isDirectory) {
+            const directoryReader = subItem.createReader();
+            directoryReader.readEntries(entries => {
+                entries.forEach(entry => {
+                    entry.name = entry.fullPath;
+                    iterate(entry)
+                })
+            });
+        } else
+            subItem.file(file => {
+                const newName = subItem.fullPath.charAt(0) === '/' ? subItem.fullPath.substr(1) : subItem.fullPath;
+                console.log(newName);
+                files.push(new File([file], newName, {
+                    lastModified: file.lastModified,
+                    lastModifiedDate: file.lastModifiedDate,
+                    size: file.size,
+                    webkitRelativePath: file.webkitRelativePath,
+                    type: file.type,
+                }));
+            }, err => console.error(err));
+    })(item);
+
+    // REMEMBER: This is a quite ugly solution but due to the almost inexistent filesystem support in most browsers
+    //  we need to use this!
+    setTimeout(() => {
+        console.log(files);
+        callback(files.flat(100))
+    }, 100) // max iterate time the pc may need: 100ms
+}
+
+/**
  * Set up sort features
+ * @param table
+ * @param col
+ * @param ascending
  */
 function sortTable(table, col, ascending) {
     const tb = table.tBodies[0];
diff --git a/src/main/resources/js/fileview.js b/src/main/resources/js/fileview.js
index c368219..12d7ba4 100644
--- a/src/main/resources/js/fileview.js
+++ b/src/main/resources/js/fileview.js
@@ -14,7 +14,6 @@ const originalContent = content.innerText;
 if (extension === "html") {
     preview.src = "data:text/html;charset=utf-8," + encodeURI(originalContent);
 
-    preview.style.display = "none";
     raw.style.display = "block";
     content.style.display = "block";