feat: upload files by dragging

Author: abdel-17

sites/preview/src/lib/components/tree/ContextMenu.svelte

@@ -123,7 +123,7 @@
 		}
 
 		onFilesSelected = (files) => {
-			if (files === null || files.length === 0) {
+			if (files === null) {
 				return;
 			}
 

sites/preview/src/lib/components/tree/NameFormDialog.svelte

@@ -39,8 +39,8 @@
 			throw new Error("Dialog is closed");
 		}
 
-		event.preventDefault();
 		showArgs.onSubmit(name);
+		event.preventDefault();
 	};
 </script>
 

sites/preview/src/lib/components/tree/Tree.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { FileNode, FolderNode, type FileTree, type FileTreeNode } from "$lib/tree.svelte";
-	import { formatSize } from "$lib/utils.js";
+	import { composeEventHandlers, formatSize } from "$lib/utils.js";
 	import {
 		Tree,
 		type CircularReferenceErrorArgs,
@@ -11,6 +11,7 @@
 		type TreeProps,
 	} from "svelte-file-tree";
 	import { toast } from "svelte-sonner";
+	import type { EventHandler } from "svelte/elements";
 	import { SvelteSet } from "svelte/reactivity";
 	import ContextMenu from "./ContextMenu.svelte";
 	import NameConflictDialog from "./NameConflictDialog.svelte";
@@ -50,6 +51,9 @@
 		clipboardIds = new SvelteSet(defaultClipboardIds),
 		pasteOperation = $bindable(),
 		ref = $bindable(null),
+		onfocusout,
+		ondragover,
+		ondrop,
 		...rest
 	}: Props = $props();
 
@@ -210,6 +214,39 @@
 			},
 		});
 	}
+
+	function handleExpand(target: TreeItemState<FileTreeNode>): void {
+		expandedIds.add(target.node.id);
+	}
+
+	function handleCollapse(target: TreeItemState<FileTreeNode>): void {
+		expandedIds.delete(target.node.id);
+	}
+
+	function handleFocusOut(): void {
+		focusedItem = undefined;
+	}
+
+	function handleFocusInItem(target: TreeItemState<FileTreeNode>): void {
+		focusedItem = target;
+	}
+
+	const handleDragOver: EventHandler<DragEvent, HTMLDivElement> = (event) => {
+		event.preventDefault();
+	};
+
+	const handleDrop: EventHandler<DragEvent, HTMLDivElement> = (event) => {
+		if (event.defaultPrevented) {
+			return;
+		}
+
+		if (event.dataTransfer === null) {
+			return;
+		}
+
+		handleUploadFiles(tree, event.dataTransfer.files);
+		event.preventDefault();
+	};
 </script>
 
 <div class="root flex h-full flex-col">
@@ -240,24 +277,23 @@
 			bind:this={treeComponent}
 			bind:pasteOperation
 			bind:ref
-			class="px-(--tree-inline-padding) py-2"
+			class="h-full px-(--tree-inline-padding) py-2"
 			copyNode={(node) => node.copy()}
 			onResolveNameConflict={handleResolveNameConflict}
 			onCircularReferenceError={handleCircularReferenceError}
-			onfocusout={() => {
-				focusedItem = undefined;
-			}}
+			onfocusout={composeEventHandlers(onfocusout, handleFocusOut)}
+			ondragover={composeEventHandlers(ondragover, handleDragOver)}
+			ondrop={composeEventHandlers(ondrop, handleDrop)}
 		>
 			{#snippet item({ item })}
 				<TreeItem
 					{item}
 					{contextMenu}
-					onExpand={() => expandedIds.add(item.node.id)}
-					onCollapse={() => expandedIds.delete(item.node.id)}
-					onRename={() => handleRename(item)}
-					onfocusin={() => {
-						focusedItem = item;
-					}}
+					onExpand={handleExpand}
+					onCollapse={handleCollapse}
+					onRename={handleRename}
+					onUploadFiles={handleUploadFiles}
+					onfocusin={() => handleFocusInItem(item)}
 				/>
 			{/snippet}
 		</Tree>

sites/preview/src/lib/components/tree/TreeItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { FileTreeNode } from "$lib/tree.svelte";
-	import { formatSize } from "$lib/utils.js";
+	import type { FileTreeNode, FolderNode } from "$lib/tree.svelte";
+	import { composeEventHandlers, formatSize } from "$lib/utils.js";
 	import { ChevronDownIcon, FileIcon, FolderIcon, FolderOpenIcon } from "@lucide/svelte";
 	import { TreeItem, type TreeItemProps, type TreeItemState } from "svelte-file-tree";
 	import type { EventHandler } from "svelte/elements";
@@ -9,9 +9,10 @@
 	interface Props extends Omit<TreeItemProps, "children"> {
 		item: TreeItemState<FileTreeNode>;
 		contextMenu: ContextMenu | null;
-		onExpand: () => void;
-		onCollapse: () => void;
-		onRename: () => void;
+		onExpand: (target: TreeItemState<FileTreeNode>) => void;
+		onCollapse: (target: TreeItemState<FileTreeNode>) => void;
+		onRename: (target: TreeItemState<FileTreeNode>) => void;
+		onUploadFiles: (target: FolderNode, files: FileList) => void;
 	}
 
 	let {
@@ -20,55 +21,67 @@
 		onExpand,
 		onCollapse,
 		onRename,
+		onUploadFiles,
 		ref = $bindable(null),
+		onkeydown,
+		oncontextmenu,
+		ondrop,
 		...rest
 	}: Props = $props();
 
 	const handleKeyDown: EventHandler<KeyboardEvent, HTMLDivElement> = (event) => {
+		if (item.disabled) {
+			return;
+		}
+
 		if (event.key === "F2") {
-			onRename();
+			onRename(item);
 			event.preventDefault();
 		}
 	};
 
 	const handleContextMenu: EventHandler<MouseEvent, HTMLDivElement> = (event) => {
-		if (contextMenu === null) {
-			throw new Error("Context menu is not mounted");
-		}
-
-		if (event.defaultPrevented) {
-			return;
-		}
-
 		if (item.disabled) {
 			event.preventDefault();
 			return;
 		}
 
+		if (contextMenu === null) {
+			throw new Error("Context menu is not mounted");
+		}
+
 		contextMenu.show({
 			type: "item",
 			item: () => item,
 		});
 	};
 
+	const handleDrop: EventHandler<DragEvent, HTMLDivElement> = (event) => {
+		if (event.dataTransfer === null || item.disabled || item.node.type === "file") {
+			return;
+		}
+
+		onUploadFiles(item.node, event.dataTransfer.files);
+		event.preventDefault();
+	};
+
 	const handleToggleClick: EventHandler<MouseEvent, HTMLButtonElement> = (event) => {
 		if (ref === null) {
 			throw new Error("Tree item is not mounted");
 		}
 
 		if (item.disabled) {
-			event.preventDefault();
 			return;
 		}
 
 		if (item.expanded) {
-			onCollapse();
+			onCollapse(item);
 		} else {
-			onExpand();
+			onExpand(item);
 		}
 
-		event.stopPropagation();
 		ref.focus();
+		event.stopPropagation();
 	};
 
 	$effect(() => {
@@ -94,14 +107,16 @@
 		dropPosition === "after" && "before:border-neutral-300 before:border-b-red-500",
 		dropPosition === "inside" && "before:border-red-500",
 	]}
-	onkeydown={handleKeyDown}
-	oncontextmenu={handleContextMenu}
+	onkeydown={composeEventHandlers(onkeydown, handleKeyDown)}
+	oncontextmenu={composeEventHandlers(oncontextmenu, handleContextMenu)}
+	ondrop={composeEventHandlers(ondrop, handleDrop)}
 >
 	<div
 		class="flex items-center"
 		style="padding-inline-start: calc(var(--spacing) * {item.depth * 6})"
 	>
 		<button
+			type="button"
 			aria-expanded={item.expanded}
 			tabindex={-1}
 			class={[

sites/preview/src/lib/utils.ts

@@ -1,3 +1,5 @@
+import type { EventHandler } from "svelte/elements";
+
 const sizeFormatter = new Intl.NumberFormat(undefined, {
 	style: "decimal",
 	maximumFractionDigits: 2,
@@ -26,3 +28,20 @@ export function formatSize(size: number): string {
 	size /= 1000;
 	return sizeFormatter.format(size) + " TB";
 }
+
+export function composeEventHandlers<TEvent extends Event, TTarget extends EventTarget>(
+	a: EventHandler<TEvent, TTarget> | null | undefined,
+	b: EventHandler<TEvent, TTarget>,
+): EventHandler<TEvent, TTarget> {
+	return (event) => {
+		if (a != null) {
+			a(event);
+
+			if (event.defaultPrevented) {
+				return;
+			}
+		}
+
+		b(event);
+	};
+}