Chore: rework image uploading, should work better now

src/UI/Base/FileSelector.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+
+  import { createEventDispatcher } from "svelte";
+  import { twMerge } from "tailwind-merge";
+
+  export let accept: string;
+  export let multiple: boolean = true;
+
+  const dispatcher = createEventDispatcher<{ submit: FileList }>();
+  export let cls: string = "";
+  let drawAttention = false;
+  let inputElement: HTMLInputElement;
+  let id = Math.random() * 1000000000 + "";
+</script>
+
+<form>
+  <label class={twMerge(cls, drawAttention ? "glowing-shadow" : "")} for={"fileinput"+id}>
+    <slot />
+
+  </label>
+  <input {accept} bind:this={inputElement} class="hidden" 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>