From 6d115dd74e2e7b08e99d3bc8f50f009da5fbb49e Mon Sep 17 00:00:00 2001
From: Niko Abeler <niko@rerere.org>
Date: Fri, 23 Feb 2024 10:10:07 +0100
Subject: [PATCH] finish drop file and moved into function for reusablility

---
 render/templates/forms/Article.tmpl | 59 +-------------------
 web/static/editor.js                | 86 +++++++++++++++++++++++++++++
 web/static/style.css                |  7 +++
 3 files changed, 95 insertions(+), 57 deletions(-)
 create mode 100644 web/static/editor.js

diff --git a/render/templates/forms/Article.tmpl b/render/templates/forms/Article.tmpl
index b86ffeb..f856932 100644
--- a/render/templates/forms/Article.tmpl
+++ b/render/templates/forms/Article.tmpl
@@ -4,66 +4,11 @@
 <label for="content">Content</label>
 <textarea
     id="contentField"
-    ondrop="dropHandler(event);"
-    ondragover="dragOverHandler(event);"
     name="content"
     rows="16"
 >{{.Content}}</textarea>
 
+<script src="/static/editor.js"></script>
 <script>
-    const contentField = document.getElementById("contentField")
-
-    function processFile(file) {
-        console.log(`name = ${file.name}`);
-        console.log(`size = ${file.size}`);
-        console.log(`type = ${file.type}`);
-        console.log(file)
-
-        const formData = new FormData()
-        formData.append("file", file)
-
-        fetch(
-            "/admin/api/binaries",
-            {
-                method: "POST",
-                body: formData
-            }
-        ).then((resp) => {
-            return resp.json()
-        }).then(data => {
-            if (file.type.split("/")[0] == "image") {
-                contentField.value += `\n![](${data.location})`
-            } else {
-                contentField.value += `\n[${file.name}](${data.location})`
-            }
-        })
-
-    }
-
-    function dropHandler(ev) {
-        console.log("File(s) dropped");
-        ev.preventDefault();
-
-        if (ev.dataTransfer.items) {
-            // Use DataTransferItemList interface to access the file(s)
-            [...ev.dataTransfer.items].forEach((item, i) => {
-                // If dropped items aren't files, reject them
-                if (item.kind === "file") {
-                    const file = item.getAsFile();
-                    processFile(file)
-                }
-            });
-        } else {
-            // Use DataTransfer interface to access the file(s)
-            [...ev.dataTransfer.files].forEach((file, i) => {
-                processFile(file)
-            });
-        }
-    }
-
-    function dragOverHandler(ev) {
-        console.log("File(s) in drop zone");
-        ev.preventDefault();
-    }
-
+    addFileDrop("contentField")
 </script>
\ No newline at end of file
diff --git a/web/static/editor.js b/web/static/editor.js
new file mode 100644
index 0000000..fd51c82
--- /dev/null
+++ b/web/static/editor.js
@@ -0,0 +1,86 @@
+/**
+ * Add "drop to upload" to a text area
+ * @param {string} id id of a textarea
+ */
+function addFileDrop(id) {
+    // deactivate file drop on body 
+    // this prevents accidentally opening the file instead uploading
+    document.body.ondrop = (ev) => {
+        ev.preventDefault();
+        return false
+    }
+    document.body.ondragover = (ev) => {
+        ev.preventDefault();
+        return false
+    }
+
+    // get field
+    const textArea = document.getElementById(id)
+
+    /**
+     * Uploads a single file and add markdown to textarea
+     * @param {File} file file object to upload
+     */
+    function processFile(file) {
+        console.log(`name = ${file.name}`);
+        console.log(`size = ${file.size}`);
+        console.log(`type = ${file.type}`);
+        console.log(file)
+
+        const formData = new FormData()
+        formData.append("file", file)
+
+        fetch(
+            "/admin/api/binaries",
+            {
+                method: "POST",
+                body: formData
+            }
+        ).then((resp) => {
+            return resp.json()
+        }).then(data => {
+            if (file.type.split("/")[0] == "image") {
+                textArea.value += `\n![](${data.location})`
+            } else {
+                textArea.value += `\n[${file.name}](${data.location})`
+            }
+        })
+
+    }
+
+    function dropHandler(ev) {
+        textArea.classList.remove("drop-file")
+        ev.preventDefault();
+
+        if (ev.dataTransfer.items) {
+            // Use DataTransferItemList interface to access the file(s)
+            [...ev.dataTransfer.items].forEach((item, i) => {
+                // If dropped items aren't files, reject them
+                if (item.kind === "file") {
+                    const file = item.getAsFile();
+                    processFile(file)
+                }
+            });
+        } else {
+            // Use DataTransfer interface to access the file(s)
+            [...ev.dataTransfer.files].forEach((file, i) => {
+                processFile(file)
+            });
+        }
+    }
+
+    function dragOverHandler(ev) {
+        textArea.classList.add("drop-file")
+        ev.preventDefault();
+    }
+
+    function dragLeaveHandler(ev) {
+        textArea.classList.remove("drop-file")
+        ev.preventDefault();
+    }    
+
+    textArea.ondrop = dropHandler;
+    textArea.ondragover = dragOverHandler;
+    textArea.ondragleave = dragLeaveHandler;
+
+}
\ No newline at end of file
diff --git a/web/static/style.css b/web/static/style.css
index 0c76479..649a954 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -21,4 +21,11 @@
 
 .danger {
     background-color: var(--del-color) !important;
+}
+
+.drop-file {
+    background: #a2dbff;
+    border-style: dashed;
+    border-width: 4px;
+    border-color: #5391ff;
 }
\ No newline at end of file