From 05b697fd246e7858654c38650207f68c3d57a5b7 Mon Sep 17 00:00:00 2001
From: Danielv123 <danielv@danielv.no>
Date: Wed, 15 May 2024 19:43:40 +0100
Subject: [PATCH] Prevent dropping files outside of dropzones

---
 packages/web_ui/src/components/Dropzone.tsx   |  3 +-
 packages/web_ui/src/components/SiteLayout.tsx | 35 +++++++++++++++++--
 .../web_ui/src/components/UploadButton.tsx    |  1 +
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/packages/web_ui/src/components/Dropzone.tsx b/packages/web_ui/src/components/Dropzone.tsx
index 0af48ff4..cef95cd6 100644
--- a/packages/web_ui/src/components/Dropzone.tsx
+++ b/packages/web_ui/src/components/Dropzone.tsx
@@ -7,6 +7,7 @@ export function Dropzone() {
 	const isDroppingFile = useContext(DraggingContext);
 
 	return <div
+		className="dropzone" // Don't remove this class, linked to SiteLayout.tsx
 		style={{
 			position: "absolute",
 			top: "0",
@@ -21,7 +22,7 @@ export function Dropzone() {
 		}}
 	>
 		<div
-			id="dropzone-icon"
+			className="dropzone-icon"
 			style={{
 				fontSize: "72px",
 				color: "rgb(22, 119, 255)",
diff --git a/packages/web_ui/src/components/SiteLayout.tsx b/packages/web_ui/src/components/SiteLayout.tsx
index 31b0374f..856ac492 100644
--- a/packages/web_ui/src/components/SiteLayout.tsx
+++ b/packages/web_ui/src/components/SiteLayout.tsx
@@ -13,6 +13,22 @@ import { DraggingContext } from "../model/is_dragging";
 
 const { Header, Sider } = Layout;
 
+function isDropzone(element: HTMLElement | null): boolean {
+	if (!element) {
+		return false;
+	}
+	const checkDepth = 5;
+	let depth = 0;
+	while (element && depth < checkDepth) {
+		if (element.classList.contains("dropzone")) {
+			return true;
+		}
+		element = element.parentElement;
+		depth += 1;
+	}
+	return false;
+}
+
 export default function SiteLayout() {
 	let navigate = useNavigate();
 	let [currentSidebarPath, setCurrentSidebarPath] = useState<string | null>(null);
@@ -86,9 +102,24 @@ export default function SiteLayout() {
 		onDragEnter={() => setDraggingProxy(1)}
 		onDragLeave={() => setDraggingProxy(-1)}
 		// Reset dragging state when dropped
-		onDrop={() => setDragging(0)}
+		onDrop={(e) => {
+			setDragging(0);
+			// Prevent dropping outside of dropzone
+			if (!isDropzone(e.target as HTMLElement)) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+		}}
 		// Allow entire document to be a drag target
-		onDragOver={(e) => e.preventDefault()}
+		onDragOver={(e) => {
+			e.preventDefault();
+			// Change cursor
+			if (isDropzone(e.target as HTMLElement)) {
+				e.dataTransfer.dropEffect = "copy";
+			} else {
+				e.dataTransfer.dropEffect = "none";
+			}
+		}}
 	>
 		<DraggingContext.Provider value={dragging > 0}>
 			<Header className="header">
diff --git a/packages/web_ui/src/components/UploadButton.tsx b/packages/web_ui/src/components/UploadButton.tsx
index c6c324a9..652ce9a4 100644
--- a/packages/web_ui/src/components/UploadButton.tsx
+++ b/packages/web_ui/src/components/UploadButton.tsx
@@ -7,6 +7,7 @@ import { DraggingContext } from "../model/is_dragging";
 export default function UploadButton(props: React.ComponentProps<typeof Button>) {
 	const isDroppingFile = useContext(DraggingContext);
 	return <Button
+		className="dropzone"
 		{...props}
 		style={{
 			...props.style,