finish drop file and moved into function for reusablility

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")
+    addFileDrop("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();
-    }
-
 </script>

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;
+
+}

web/static/style.css

@@ -22,3 +22,10 @@
 .danger {
     background-color: var(--del-color) !important;
 }
+
+.drop-file {
+    background: #a2dbff;
+    border-style: dashed;
+    border-width: 4px;
+    border-color: #5391ff;
+}