Added download button

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

5 files changed, 76 insertions, 22 deletions

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index ebdb560..8fb289c 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -45,7 +45,6 @@ fun main() {
 
         /**
          * Main page
-         * TODO: Create landing page
          */
         get(
             "/",
@@ -97,13 +96,11 @@ fun main() {
 
         /**
          * Renders the file list view
-         * TODO: Fix possible security issue with "../"
          */
         get("/files/*", fileController::crawl, roles(Roles.USER))
 
         /**
          * Receives and saves multipart media data
-         * TODO: Fix possible security issue with "../"
          */
         post("/upload/*", fileController::upload, roles(Roles.USER))
 
diff --git a/src/main/kotlin/FileController.kt b/src/main/kotlin/FileController.kt
index b7ff9d7..40ca1c9 100644
--- a/src/main/kotlin/FileController.kt
+++ b/src/main/kotlin/FileController.kt
@@ -22,6 +22,7 @@ class FileController {
             val firstParam = ctx.splat(0) ?: ""
             File(usersFileHome).mkdirs()
             when {
+                ctx.queryParam("raw") != null -> ctx.result(FileInputStream(File("$usersFileHome/$firstParam")))
                 File("$usersFileHome/$firstParam").isDirectory -> {
                     val files = ArrayList<Array<String>>()
                     Files.list(Paths.get("$usersFileHome/$firstParam/")).forEach {
@@ -46,10 +47,8 @@ class FileController {
                     files.sortWith(compareBy { it.first() })
                     ctx.render(
                         "files.rocker.html", TemplateUtil.model(
-                            "files",
-                            files,
-                            "path",
-                            (if (firstParam.firstOrNull() == '/') firstParam.drop(1) else firstParam)
+                            "files", files,
+                            "path", (if (firstParam.firstOrNull() == '/') firstParam.drop(1) else firstParam)
                         )
                     )
                 }
@@ -227,7 +226,7 @@ class FileController {
                     "files.rocker.html", TemplateUtil.model(
                         "files", files,
                         "path",
-                        (if (sharedFileData.fileLocation.firstOrNull() != '/') "/${sharedFileData.fileLocation}" else sharedFileData.fileLocation)
+                        (if (sharedFileData.fileLocation.firstOrNull() == '/') sharedFileData.fileLocation.drop(1) else sharedFileData.fileLocation)
                     )
                 )
             }
diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css
index 5af9ec8..d0be48e 100644
--- a/src/main/resources/css/files.css
+++ b/src/main/resources/css/files.css
@@ -46,7 +46,7 @@ colgroup col:nth-child(1) {
 }
 
 colgroup col:nth-child(2) {
-    width: 35%;
+    width: 25%;
 }
 
 colgroup col:nth-child(3) {
@@ -65,13 +65,17 @@ colgroup col:nth-child(6) {
     width: 10%;
 }
 
+colgroup col:nth-child(7) {
+    width: 10%;
+}
+
 .drop {
     padding: 8px;
     min-height: calc(100vh - 16px);
     z-index: -1;
 }
 
-.delete {
+.share {
     font-size: 20px;
     background-color: inherit;
     border: 0;
@@ -79,20 +83,34 @@ colgroup col:nth-child(6) {
     cursor: pointer;
 }
 
-.delete:hover {
+.share:hover {
     transform: scale(1.3);
-    color: red;
+    color: dodgerblue;
 }
 
-.share {
+.download, .downloadButton {
     font-size: 20px;
+    color: inherit;
     background-color: inherit;
     border: 0;
     z-index: 100;
     cursor: pointer;
 }
 
-.share:hover {
+.downloadButton:hover {
     transform: scale(1.3);
-    color: dodgerblue;
+    color: green;
+}
+
+.delete {
+    font-size: 20px;
+    background-color: inherit;
+    border: 0;
+    z-index: 100;
+    cursor: pointer;
+}
+
+.delete:hover {
+    transform: scale(1.3);
+    color: red;
 }
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index 4ef5bcc..c3fa1b1 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -35,7 +35,8 @@ drop.addEventListener('drop', e => {
         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 = "<td><button class='share'><i class='icon ion-md-share'></i></button></td>";
-        row.insertCell(5).innerHTML = "<td><button class='delete'><i class='icon ion-md-trash'></i></button></td>";
+        row.insertCell(5).innerHTML = "<button class='downloadButton'><a class='download' href='" + file.name + "' download='" + file.name + "'><i class='icon ion-md-download'></i></a></button>";
+        row.insertCell(6).innerHTML = "<td><button class='delete'><i class='icon ion-md-trash'></i></button></td>";
 
         setListeners();
 
@@ -180,6 +181,20 @@ function setListeners() {
         })
     });
 
+    // download button
+    document.querySelectorAll(".download").forEach(element => {
+        element.addEventListener("click", e => {
+            e.stopPropagation();
+        })
+    });
+    document.querySelectorAll(".downloadButton").forEach(element => {
+        element.addEventListener("click", e => {
+            console.log(e);
+            e.stopPropagation();
+            e.target.children[0].click()
+        })
+    });
+
     // share button
     document.querySelectorAll(".share").forEach(element => {
         element.addEventListener("click", e => {
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index f3f816a..56cfc88 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -31,6 +31,7 @@
             <col/>
             <col/>
             <col/>
+            <col/>
         </colgroup>
 
         <thead>
@@ -40,6 +41,7 @@
             <th data-asc="true">Size</th>
             <th data-asc="true">Last modified</th>
             <th data-asc="true">Share</th>
+            <th data-asc="true">Download</th>
             <th data-asc="true">Delete</th>
         </tr>
         <tr data-href="../">
@@ -49,6 +51,7 @@
             <td></td>
             <td></td>
             <td></td>
+            <td></td>
         </tr>
         </thead>
 
@@ -62,19 +65,41 @@
 
             <!-- TODO: Add more icons (more specific file types) -->
             @if (fileArray[4] == "true") {
-            <td><i class="icon ion-md-folder"></i></td>
+            <td>
+                <i class="icon ion-md-folder"></i>
+            </td>
             } else if (fileArray[3] == "false") {
-            <td><i class="icon ion-md-code"></i></td>
+            <td>
+                <i class="icon ion-md-code"></i>
+            </td>
             } else {
-            <td><i class="icon ion-md-document"></i></td>
+            <td>
+                <i class="icon ion-md-document"></i>
+            </td>
             }
 
-            <td>@fileArray[0]</td>
-            <td data-size="@fileArray[5]">@fileArray[1]</td>
-            <td data-date="@fileArray[6]">@fileArray[2]</td>
+            <td>
+                @fileArray[0]
+            </td>
+
+            <td data-size="@fileArray[5]">
+                @fileArray[1]
+            </td>
+
+            <td data-date="@fileArray[6]">
+                @fileArray[2]
+            </td>
+
             <td>
                 <button class="share"><i class="icon ion-md-share"></i></button>
             </td>
+
+            <td>
+                <button class="downloadButton">
+                    <a class="download" download="@fileArray[0]" href="@fileArray[0]?raw"><i class="icon ion-md-download"></i></a>
+                </button>
+            </td>
+
             <td>
                 <button class="delete"><i class="icon ion-md-trash"></i></button>
             </td>