Centralize drag-and-drop upload code

svelte/src/home_page/UploadLoginWall.svelte

@@ -2,16 +2,26 @@
 import Login from "../login/Login.svelte";
 import Register from "../login/Register.svelte";
 import UploadWidget from "./UploadWidget.svelte";
+import { drop_target } from "src/util/DropTarget.ts"
 
 const finish_login = async e => {
 	location.reload()
 }
 
+let upload_widget
 let page = "login"
 </script>
 
 {#if window.user && window.user.username && window.user.username !== ""}
-	<UploadWidget/>
+	<div
+		class="drop_target"
+		use:drop_target={{
+			upload: (files) => upload_widget.upload_files(files),
+			shadow: "var(--highlight_color) 0 0 10px 2px inset",
+		}}
+	>
+		<UploadWidget bind:this={upload_widget}/>
+	</div>
 {:else}
 	<section>
 		<p>
@@ -51,6 +61,9 @@ let page = "login"
 {/if}
 
 <style>
+.drop_target {
+	border-radius: 8px;
+}
 .tab_bar > button {
 	width: 40%;
 	max-width: 10em;

svelte/src/home_page/UploadWidget.svelte

@@ -21,15 +21,6 @@ const file_input_change = (event) => {
 	// This resets the file input field
 	file_input_field.nodeValue = ""
 }
-let dragging = false
-const drop = (e) => {
-	dragging = false;
-	if (e.dataTransfer && e.dataTransfer.items.length > 0) {
-		e.preventDefault()
-		e.stopPropagation()
-		upload_files(e.dataTransfer.files)
-	}
-}
 const paste = (e) => {
 	if (e.clipboardData.files[0]) {
 		e.preventDefault();
@@ -43,7 +34,7 @@ let upload_queue = []
 let state = "idle" // idle, uploading, finished
 let upload_stats
 
-const upload_files = async (files) => {
+export const upload_files = async (files) => {
 	if (files.length === 0) {
 		return
 	}
@@ -279,14 +270,7 @@ const keydown = (e) => {
 
 </script>
 
-<svelte:window
-	on:dragover|preventDefault|stopPropagation={() => { dragging = true }}
-	on:dragenter|preventDefault|stopPropagation={() => { dragging = true }}
-	on:dragleave|preventDefault|stopPropagation={() => { dragging = false }}
-	on:drop={drop}
-	on:paste={paste}
-	on:keydown={keydown}
-	on:beforeunload={leave_confirmation} />
+<svelte:window on:paste={paste} on:keydown={keydown} on:beforeunload={leave_confirmation} />
 
 <Konami/>
 
@@ -327,11 +311,6 @@ const keydown = (e) => {
 	<br/>
 
 	<UploadStats bind:this={upload_stats} upload_queue={upload_queue}/>
-
-	<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
-		Gimme gimme gimme!<br/>
-		Drop your files to upload them
-	</div>
 </section>
 
 {#each upload_queue as file}