Added file delete buttons

5 files changed, 113 insertions, 49 deletions

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index fb93564..d95c887 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -101,6 +101,11 @@ fun main() {
          * TODO: Fix possible security issue with "../"
          */
         post("/upload/*", ::upload, roles(Roles.USER))
+
+        /**
+         * Deletes file
+         */
+        post("/delete/*", ::delete, roles(Roles.USER))
     }
 }
 
@@ -300,6 +305,16 @@ fun setup(ctx: Context) {
 }
 
 /**
+ * Deletes the requested file
+ */
+fun delete(ctx: Context) {
+    if (getVerifiedUserId(ctx) > 0) {
+        File("$fileHome/${getVerifiedUserId(ctx)}/${ctx.splats()[0]}").delete()
+        // TODO: delete from database
+    }
+}
+
+/**
  * Declares the roles in which a user can be in
  */
 enum class Roles : Role {
diff --git a/src/main/kotlin/DatabaseController.kt b/src/main/kotlin/DatabaseController.kt
index a89a719..74ddf70 100644
--- a/src/main/kotlin/DatabaseController.kt
+++ b/src/main/kotlin/DatabaseController.kt
@@ -223,6 +223,19 @@ class DatabaseController(dbFileLocation: String = "main.db") {
     }
 
     /**
+     * Removes the file from the database
+     */
+    fun deleteFile(fileLocation: String, userId: Int) {
+        transaction {
+            try {
+                FileLocation.deleteWhere { FileLocation.location eq fileLocation and FileLocation. }
+            } catch (_: org.jetbrains.exposed.exceptions.ExposedSQLException) {
+
+            }
+        }
+    }
+
+    /**
      * Checks whether the site has been set up
      */
     fun isSetup(): Boolean {
diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css
index 2bfabd7..8fb12f4 100644
--- a/src/main/resources/css/files.css
+++ b/src/main/resources/css/files.css
@@ -31,3 +31,10 @@ table thead tr:hover {
     min-height: calc(100vh - 16px);
     z-index: -1;
 }
+
+.delete {
+    font-size: 20px;
+    background-color: inherit;
+    border: 0;
+    z-index: 100;
+}
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index c762da9..450a2a6 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -33,8 +33,9 @@ drop.addEventListener('drop', e => {
         row.insertCell(0).innerHTML = file.name;
         row.insertCell(1).innerHTML = bytesToSize(file.size);
         row.insertCell(2).innerHTML = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+        row.insertCell(3).innerHTML = "<td><button class='delete'>&times;</button></td>";
 
-        //setListeners();
+        setListeners();
 
         formData.append("file", file);
         request.open("POST", "/upload/" + path);
@@ -52,64 +53,84 @@ drop.addEventListener('drop', e => {
 /**
  * Set up listeners
  */
-document.querySelectorAll("[data-path]").forEach(element => {
-    const images = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "tiff"];
-    const videos = ["mp4", "m4v", "mov", "webm", "avi", "wmv", "mpg", "mpv", "mpeg"];
-    const audio = ["mp3", "m4a", "wav", "ogg"];
-
-    const filename = element.getAttribute("data-path");
-    const extension = /(?:\.([^.]+))?$/.exec(filename)[1].toLowerCase();
-
-    if (images.indexOf(extension) > -1) {
-        element.setAttribute("data-bp", filename);
-        element.setAttribute("data-image", "");
-    } else if (videos.indexOf(extension) > -1) {
-        element.setAttribute("data-src", filename);
-        element.setAttribute("data-video", "");
-    } else if (audio.indexOf(extension) > -1) {
-        element.setAttribute("data-src", filename);
-        element.setAttribute("data-audio", "");
-    }
-
-    element.addEventListener("click", () => {
-        if (images.indexOf(extension) === -1 && videos.indexOf(extension) === -1 && audio.indexOf(extension) === -1)
-            window.location = filename; // download binary files
+function setListeners() {
+    document.querySelectorAll("[data-path]").forEach(element => {
+        const images = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "tiff"];
+        const videos = ["mp4", "m4v", "mov", "webm", "avi", "wmv", "mpg", "mpv", "mpeg", "ogv"];
+        const audio = ["mp3", "m4a", "wav", "ogg"];
+
+        const filename = element.getAttribute("data-path");
+        const extension = /(?:\.([^.]+))?$/.exec(filename)[1].toLowerCase();
+
+        if (images.indexOf(extension) > -1) {
+            element.setAttribute("data-bp", filename);
+            element.setAttribute("data-image", "");
+        } else if (videos.indexOf(extension) > -1) {
+            element.setAttribute("data-src", filename);
+            element.setAttribute("data-video", "");
+        } else if (audio.indexOf(extension) > -1) {
+            element.setAttribute("data-src", filename);
+            element.setAttribute("data-audio", "");
+        }
+
+        element.addEventListener("click", () => {
+            if (images.indexOf(extension) === -1 && videos.indexOf(extension) === -1 && audio.indexOf(extension) === -1)
+                window.location = filename; // download binary files
+        });
     });
-});
 
 // images
-document.querySelectorAll("[data-image]").forEach(element => {
-    element.addEventListener("click", image => {
-        BigPicture({
-            el: image.currentTarget,
-            gallery: document.querySelectorAll("[data-image]")
-        })
+    document.querySelectorAll("[data-image]").forEach(element => {
+        element.addEventListener("click", image => {
+            BigPicture({
+                el: image.currentTarget,
+                gallery: document.querySelectorAll("[data-image]")
+            })
+        });
     });
-});
 
 // videos // TODO: Fix timeout exception and scrubbing issues with chromium based browsers
-document.querySelectorAll("[data-video]").forEach(element => {
-    element.addEventListener("click", video => {
-        BigPicture({
-            el: video.currentTarget,
-            vidSrc: video.currentTarget.getAttribute("data-src")
-        })
+    document.querySelectorAll("[data-video]").forEach(element => {
+        element.addEventListener("click", video => {
+            BigPicture({
+                el: video.currentTarget,
+                vidSrc: video.currentTarget.getAttribute("data-src")
+            })
+        });
     });
-});
 
 //audio // TODO: Fix IOException and scrubbing issues with chromium based browsers
-document.querySelectorAll("[data-audio]").forEach(element => {
-    element.addEventListener("click", audio => {
-        BigPicture({
-            el: audio.currentTarget,
-            audio: audio.currentTarget.getAttribute("data-src")
+    document.querySelectorAll("[data-audio]").forEach(element => {
+        element.addEventListener("click", audio => {
+            BigPicture({
+                el: audio.currentTarget,
+                audio: audio.currentTarget.getAttribute("data-src")
+            });
         });
     });
-});
 
 // normal files
-document.querySelectorAll("[data-href]").forEach(element => {
-    element.addEventListener("click", () => {
-        window.location = element.getAttribute("data-href");
-    })
-});
+    document.querySelectorAll("[data-href]").forEach(element => {
+        element.addEventListener("click", () => {
+            window.location = element.getAttribute("data-href");
+        })
+    });
+
+// deletion button
+    document.querySelectorAll(".delete").forEach(element => {
+        // TODO: remove eventListener which opens file
+        // -> IDEA: use functions instead of anonymous callbacks
+
+        element.addEventListener("click", e => {
+            e.stopPropagation();
+            const request = new XMLHttpRequest();
+            const parent = e.target.parentElement.parentElement;
+            const fileName = parent.getAttribute("data-href") || parent.getAttribute("data-path");
+            request.open("POST", `/delete/${path}/${fileName}`);
+            request.send();
+            parent.remove();
+        })
+    });
+}
+
+setListeners();
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index 96676ed..a50c0b2 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -20,6 +20,7 @@
             <th>Name</th>
             <th>Size</th>
             <th>Last modified</th>
+            <th>Delete</th>
         </tr>
         </thead>
 
@@ -28,6 +29,7 @@
             <td>../</td>
             <td></td>
             <td></td>
+            <td></td>
         </tr>
 
         @for (String[] fileArray : files) {
@@ -36,12 +38,18 @@
             <td>@fileArray[0]</td>
             <td>@fileArray[1]</td>
             <td>@fileArray[2]</td>
+            <td>
+                <button class="delete">&times;</button>
+            </td>
         </tr>
         } else {
         <tr data-path="@fileArray[0]">
             <td>@fileArray[0]</td>
             <td>@fileArray[1]</td>
             <td>@fileArray[2]</td>
+            <td>
+                <button class="delete">&times;</button>
+            </td>
         </tr>
         }
         }