src/routes/(token-based)/list/[vorgang]/+page.svelte

@@ -287,8 +287,26 @@ Mit freundlichen Grüßen,
 		open = false;
 		isError = false;
 	}
+
+	// drag and drop functionality
+		let isDragging = $state(false);
+
+		function handleDrop(event) {
+			event.preventDefault();
+			isDragging = false;
+
+			if (event.dataTransfer?.files?.length) {
+				files = event.dataTransfer.files;
+			}
+		}
+
 </script>
 
+<svelte:window
+	on:dragover|preventDefault
+	on:drop|preventDefault
+/>
+
 {#if data.vorgang && crimesList}
 	<div class="-z-10 bg-white">
 		<div class="flex flex-col items-center justify-center w-full">
@@ -415,7 +433,13 @@ Mit freundlichen Grüßen,
 							</span>
 						</label>
 						<div
-							class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10"
+							class="mt-2 flex justify-center rounded-lg border border-dashed px-6 py-10
+								{isDragging
+								? 'border-blue-500 bg-blue-50'
+								: 'border-gray-900/25'}"
+							on:dragover|preventDefault={() => (isDragging = true)}
+							on:dragleave={() => (isDragging = false)}
+							on:drop={handleDrop}
 						>
 							<div class="text-center">
 								<FileRect />