Better Image uploading

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

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

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

frontend/views/blogNew.ejs

@@ -45,4 +45,4 @@
   </body>
 </html>
 
-<script defer src="/js/login.js"></script>
+<script defer src="/js/newBlog.js"></script>