Prevent dropping files outside of dropzones

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)",

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">

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,