drag files into article

render/templates/forms/Article.tmpl

@@ -2,4 +2,68 @@
 <input type="text" name="title" value="{{.Title}}" />
 
 <label for="content">Content</label>
-<textarea name="content" rows="16">{{.Content}}</textarea>
+<textarea
+    id="contentField"
+    ondrop="dropHandler(event);"
+    ondragover="dragOverHandler(event);"
+    name="content"
+    rows="16"
+>{{.Content}}</textarea>
+
+<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();
+    }
+
+</script>

web/app.go

@@ -69,6 +69,9 @@ func NewWebApp(
 	admin.Post("/binaries/delete", binaryManageHandler.HandleDelete)
 	admin.Post("/interactions/:id/delete/", adminInteractionHandler.HandleDelete)
 
+	adminApi := admin.Group("/api")
+	adminApi.Post("/binaries", binaryManageHandler.HandleUploadApi)
+
 	// Editor
 	editor := app.Group("/editor")
 	editor.Use(middleware.NewAuthMiddleware(authorService).Handle)

web/binary_manager_handler.go

@@ -3,6 +3,7 @@ package web
 import (
 	"owl-blogs/app"
 	"owl-blogs/app/repository"
+	"owl-blogs/domain/model"
 	"owl-blogs/render"
 	"sort"
 	"strings"
@@ -46,31 +47,48 @@ func (h *BinaryManageHandler) Handle(c *fiber.Ctx) error {
 
 }
 
-func (h *BinaryManageHandler) HandleUpload(c *fiber.Ctx) error {
+func (h *BinaryManageHandler) saveFileUpload(c *fiber.Ctx) (*model.BinaryFile, error) {
 	file, err := c.FormFile("file")
 	if err != nil {
-		return err
+		return nil, err
 	}
 	reader, err := file.Open()
 	if err != nil {
-		return err
+		return nil, err
 	}
 	defer reader.Close()
 
 	content := make([]byte, file.Size)
 	_, err = reader.Read(content)
 	if err != nil {
-		return err
+		return nil, err
 	}
 
 	binary, err := h.service.Create(file.Filename, content)
 	if err != nil {
-		return err
+		return nil, err
+	}
+	return binary, nil
 }
 
+func (h *BinaryManageHandler) HandleUpload(c *fiber.Ctx) error {
+	binary, err := h.saveFileUpload(c)
+	if err != nil {
+		return err
+	}
 	return c.Redirect("/media/" + binary.Id)
 }
 
+func (h *BinaryManageHandler) HandleUploadApi(c *fiber.Ctx) error {
+	binary, err := h.saveFileUpload(c)
+	if err != nil {
+		return err
+	}
+	return c.JSON(map[string]string{
+		"location": "/media/" + binary.Id,
+	})
+}
+
 func (h *BinaryManageHandler) HandleDelete(c *fiber.Ctx) error {
 	id := c.FormValue("file")
 	binary, err := h.service.FindById(id)