From 5ec7ec5c50eeb3e2c281c0edfee6c74d7d512500 Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Sun, 7 Apr 2019 17:17:17 +0200
Subject: Added drag and drop file upload

---
 src/main/resources/css/files.css            |  6 ++++++
 src/main/resources/css/layout.css           |  4 ++++
 src/main/resources/js/files.js              | 31 +++++++++++++++++++++++++++++
 src/main/resources/views/files.rocker.html  | 19 +++++++++++++-----
 src/main/resources/views/upload.rocker.html |  4 ++--
 5 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 src/main/resources/js/files.js

(limited to 'src/main/resources')

diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css
index 0f55ca6..798e3ec 100644
--- a/src/main/resources/css/files.css
+++ b/src/main/resources/css/files.css
@@ -3,3 +3,9 @@ a.filename {
     text-decoration: none;
     margin-bottom: 5px;;
 }
+
+.drop {
+    padding: 8px;
+    min-height: calc(100vh - 16px);
+    z-index: -1;
+}
diff --git a/src/main/resources/css/layout.css b/src/main/resources/css/layout.css
index 4a1e1f0..c11ee79 100644
--- a/src/main/resources/css/layout.css
+++ b/src/main/resources/css/layout.css
@@ -1,3 +1,7 @@
 html, body {
     font-family: Arial, Helvetica, sans-serif;
+    padding: 0;
+    margin: 0;
+    min-width: 100%;
+    min-height: 100%;
 }
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
new file mode 100644
index 0000000..24140b0
--- /dev/null
+++ b/src/main/resources/js/files.js
@@ -0,0 +1,31 @@
+const drop = document.getElementById("drop");
+
+drop.addEventListener('dragover', e => {
+    e.stopPropagation();
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+    drop.style.background = "rgba(12,99,250,0.3)";
+});
+
+drop.addEventListener('dragleave', e =>
+    drop.style.background = "white"
+);
+
+drop.addEventListener('drop', e => {
+    // TODO: Fix directory uploading
+    e.stopPropagation();
+    e.preventDefault();
+    drop.style.background = "white";
+    const files = e.dataTransfer.files;
+
+    for (let i = 0; i < files.length; i++) {
+        let request = new XMLHttpRequest();
+        let formData = new FormData();
+
+        drop.insertAdjacentHTML('beforeend', `<a class="filename" href="${files[i].name}">${files[i].name}</a><br><hr>`);
+
+        formData.append("file", files[i]);
+        request.open("POST", "/upload/" + path);
+        request.send(formData);
+    }
+});
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index 7a2d432..1373eca 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -1,13 +1,22 @@
 @import java.util.ArrayList
-@args (ArrayList files)
+@args (ArrayList files, String path)
 
 @css => {
 <link href="/css/files.css" rel="stylesheet">
 }
 
-@layout.template(files.size() + " Files", css, RockerContent.NONE) -> {
-@for (String file : files) {
-<a class="filename" href="@file">@file</a><br>
-<hr>
+@js => {
+<script>const path = "@path";</script>
+<script src="/js/files.js"></script>
 }
+
+@layout.template(files.size() + " Files", css, js) -> {
+<div class="drop" id="drop">
+    <a class="filename" href="../">../</a><br>
+    <hr>
+    @for (String file : files) {
+    <a class="filename" href="@file">@file</a><br>
+    <hr>
+    }
+</div>
 }
diff --git a/src/main/resources/views/upload.rocker.html b/src/main/resources/views/upload.rocker.html
index b36abdc..ec5daa2 100644
--- a/src/main/resources/views/upload.rocker.html
+++ b/src/main/resources/views/upload.rocker.html
@@ -1,8 +1,8 @@
 @args (String content)
 
 @layout.template("Upload", RockerContent.NONE, RockerContent.NONE) -> {
-<form action="/api/upload?dir=test" enctype="multipart/form-data" method="post">
-    <input multiple name="files" type="file">
+<form action="/upload/test" enctype="multipart/form-data" method="post">
+    <input multiple name="file" type="file">
     <button>Submit</button>
 </form>
 }
-- 
cgit v1.2.3