From 66c463f80ab18e9f6efa2fc256a3b7400a4e9be7 Mon Sep 17 00:00:00 2001
From: Armored-Dragon <forgejo3829105@armoreddragon.com>
Date: Fri, 27 Oct 2023 04:24:39 -0500
Subject: [PATCH] Better Image uploading

---
 frontend/public/css/new-blog.css  | 12 +++--------
 frontend/public/css/new-blog.scss | 13 +++--------
 frontend/public/js/newBlog.js     | 36 +++++++++++++++++++++++++++++++
 frontend/views/blogNew.ejs        |  2 +-
 4 files changed, 43 insertions(+), 20 deletions(-)
 create mode 100644 frontend/public/js/newBlog.js

diff --git a/frontend/public/css/new-blog.css b/frontend/public/css/new-blog.css
index 61f419c..bb7b673 100644
--- a/frontend/public/css/new-blog.css
+++ b/frontend/public/css/new-blog.css
@@ -32,10 +32,11 @@
 
 .e-image-area {
   background-color: #222;
-  height: 220px;
+  min-height: 200px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
   grid-template-rows: auto auto;
+  grid-gap: 4px;
   padding: 5px;
   box-sizing: border-box;
   width: 100%;
@@ -51,14 +52,6 @@
   height: 100%;
   margin: auto;
 }
-.e-image-area .image:nth-child(odd) {
-  grid-row: span 1;
-  grid-column: 1;
-}
-.e-image-area .image:nth-child(even) {
-  grid-row: span 1;
-  grid-column: 2;
-}
 
 .e-content {
   background-color: #222;
@@ -67,6 +60,7 @@
 }
 .e-content textarea {
   font-size: 16px;
+  min-height: 300px;
   color: white;
 }
 
diff --git a/frontend/public/css/new-blog.scss b/frontend/public/css/new-blog.scss
index b51b44f..b616e7e 100644
--- a/frontend/public/css/new-blog.scss
+++ b/frontend/public/css/new-blog.scss
@@ -39,10 +39,11 @@ $background-body: #222;
 
 .e-image-area {
   background-color: $background-body;
-  height: 220px;
+  min-height: 200px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
   grid-template-rows: auto auto;
+  grid-gap: 4px;
   padding: 5px;
   box-sizing: border-box;
   width: 100%;
@@ -59,15 +60,6 @@ $background-body: #222;
       margin: auto;
     }
   }
-
-  .image:nth-child(odd) {
-    grid-row: span 1;
-    grid-column: 1;
-  }
-  .image:nth-child(even) {
-    grid-row: span 1;
-    grid-column: 2;
-  }
 }
 
 .e-content {
@@ -76,6 +68,7 @@ $background-body: #222;
   margin-bottom: 10px;
   textarea {
     font-size: 16px;
+    min-height: 300px;
     color: white;
   }
 }
diff --git a/frontend/public/js/newBlog.js b/frontend/public/js/newBlog.js
new file mode 100644
index 0000000..90a021f
--- /dev/null
+++ b/frontend/public/js/newBlog.js
@@ -0,0 +1,36 @@
+let content_images = []; // List of all images to upload
+
+const image_drop_area = qs(".e-image-area");
+
+// Stylize the drop area
+image_drop_area.addEventListener("dragover", (event) => {
+  event.preventDefault();
+  image_drop_area.style.border = "2px dashed #333";
+});
+image_drop_area.addEventListener("dragleave", () => {
+  image_drop_area.style.border = "2px dashed #ccc";
+});
+
+image_drop_area.addEventListener("drop", async (e) => {
+  e.preventDefault();
+  image_drop_area.style.border = "2px dashed #ccc";
+
+  const files = e.dataTransfer.files;
+
+  for (let i = 0; i < files.length; i++) {
+    let image_object = { id: crypto.randomUUID(), data_blob: new Blob([await files[i].arrayBuffer()]) };
+    content_images.push(image_object);
+  }
+  updateImages();
+  console.log(content_images);
+});
+
+function updateImages() {
+  // Clear existing listings
+  qsa(".e-image-area .image").forEach((entry) => entry.remove());
+
+  // Add new entries based on saved list
+  content_images.forEach((image) => {
+    image_drop_area.insertAdjacentHTML("beforeend", `<div class="image"><img src="${URL.createObjectURL(image.data_blob)}" /></div>`);
+  });
+}
diff --git a/frontend/views/blogNew.ejs b/frontend/views/blogNew.ejs
index 61b14e6..aadc988 100644
--- a/frontend/views/blogNew.ejs
+++ b/frontend/views/blogNew.ejs
@@ -45,4 +45,4 @@
   </body>
 </html>
 
-<script defer src="/js/login.js"></script>
+<script defer src="/js/newBlog.js"></script>