From 5be24dbef1647cd2c6c869d86ea5b37f0e072106 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Mon, 9 Oct 2023 01:53:27 +0200
Subject: [PATCH] Fix: drag & drop for file selector

---
 src/UI/Base/FileSelector.svelte | 44 +++++++++++++++++----------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/UI/Base/FileSelector.svelte b/src/UI/Base/FileSelector.svelte
index 3a63f8653..9bd5b3f8e 100644
--- a/src/UI/Base/FileSelector.svelte
+++ b/src/UI/Base/FileSelector.svelte
@@ -12,7 +12,28 @@
   let id = Math.random() * 1000000000 + ""
 </script>
 
-<form>
+<form  on:change|preventDefault={() => {
+      drawAttention = false
+      dispatcher("submit", inputElement.files)
+    }}
+       on:dragend={() => {
+      console.log("Drag end")
+      drawAttention = false
+    }}
+       on:dragenter|preventDefault|stopPropagation={(e) => {
+      console.log("Dragging enter")
+      drawAttention = true
+      e.dataTransfer.drop = "copy"
+    }}
+       on:dragstart={() => {
+      console.log("DragStart")
+      drawAttention = false
+    }}
+       on:drop|preventDefault|stopPropagation={(e) => {
+      console.log("Got a 'drop'")
+      drawAttention = false
+      dispatcher("submit", e.dataTransfer.files)
+    }}>
   <label class={twMerge(cls, drawAttention ? "glowing-shadow" : "")} for={"fileinput" + id}>
     <slot />
   </label>
@@ -23,26 +44,7 @@
     id={"fileinput" + id}
     {multiple}
     name="file-input"
-    on:change|preventDefault={() => {
-      drawAttention = false
-      dispatcher("submit", inputElement.files)
-    }}
-    on:dragend={() => {
-      drawAttention = false
-    }}
-    on:dragover|preventDefault|stopPropagation={(e) => {
-      console.log("Dragging over!")
-      drawAttention = true
-      e.dataTransfer.drop = "copy"
-    }}
-    on:dragstart={() => {
-      drawAttention = false
-    }}
-    on:drop|preventDefault|stopPropagation={(e) => {
-      console.log("Got a 'drop'")
-      drawAttention = false
-      dispatcher("submit", e.dataTransfer.files)
-    }}
+   
     type="file"
   />
 </form>