Allow drag and replace image in gr.Image and Multimodal textbox (#9031

) * allow dragging image over current image value in imageeditor * add changeset * add drag to image * add changeset * type fixes * tweak * tweak * add test * add changeset * revert image editor changes (i.e. give up) * add changeset * add changeset * tweak * Ensure drag and drop functionality works in Multimodal textbox (#9125) * allow uploading files via drag * wrap tweak * * fix input * improve a11y * fix thumbnail scrolling * tweak * add changeset * add changeset --------- Co-authored-by: pngwn <hello@pngwn.io> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Aug 19, 2024 · 04b7d32 · 04b7d32
1 parent de1f7a2
commit 04b7d32
Show file tree

Hide file tree

Showing 8 changed files with 243 additions and 102 deletions.
diff --git a/.changeset/giant-beers-decide.md b/.changeset/giant-beers-decide.md
@@ -0,0 +1,8 @@
+---
+"@gradio/image": patch
+"@gradio/multimodaltextbox": patch
+"@gradio/upload": patch
+"gradio": patch
+---
+
+feat:Allow drag and replace image in `gr.Image` and Multimodal textbox
diff --git a/js/image/Index.svelte b/js/image/Index.svelte
@@ -82,6 +82,30 @@
 
 	let dragging: boolean;
 	let active_source: sources = null;
+	let upload_component: ImageUploader;
+	const handle_drag_event = (event: Event): void => {
+		const drag_event = event as DragEvent;
+		drag_event.preventDefault();
+		drag_event.stopPropagation();
+		if (drag_event.type === "dragenter" || drag_event.type === "dragover") {
+			dragging = true;
+		} else if (drag_event.type === "dragleave") {
+			dragging = false;
+		}
+	};
+
+	const handle_drop = (event: Event): void => {
+		if (interactive) {
+			const drop_event = event as DragEvent;
+			drop_event.preventDefault();
+			drop_event.stopPropagation();
+			dragging = false;
+
+			if (upload_component) {
+				upload_component.loadFilesFromDrop(drop_event);
+			}
+		}
+	};
 </script>
 
 {#if !interactive}
@@ -132,6 +156,10 @@
 		{container}
 		{scale}
 		{min_width}
+		on:dragenter={handle_drag_event}
+		on:dragleave={handle_drag_event}
+		on:dragover={handle_drag_event}
+		on:drop={handle_drop}
 	>
 		<StatusTracker
 			autoscroll={gradio.autoscroll}
@@ -141,8 +169,10 @@
 		/>
 
 		<ImageUploader
+			bind:this={upload_component}
 			bind:active_source
 			bind:value
+			bind:dragging
 			selectable={_selectable}
 			{root}
 			{sources}

diff --git a/js/image/shared/ImageUploader.svelte b/js/image/shared/ImageUploader.svelte
@@ -70,7 +70,7 @@
 		select: SelectData;
 	}>();
 
-	let dragging = false;
+	export let dragging = false;
 
 	$: dispatch("drag", dragging);
 
@@ -120,7 +120,7 @@
 			on:error
 			{root}
 			{max_file_size}
-			disable_click={!sources.includes("upload")}
+			disable_click={!sources.includes("upload") || value !== null}
 			{upload}
 			{stream_handler}
 		>

diff --git a/js/multimodaltextbox/Index.svelte b/js/multimodaltextbox/Index.svelte
@@ -50,16 +50,19 @@
 	export let interactive: boolean;
 	export let root: string;
 	export let file_count: "single" | "multiple" | "directory";
+
+	let dragging: boolean;
 </script>
 
 <Block
 	{visible}
 	{elem_id}
-	{elem_classes}
+	elem_classes={[...elem_classes, "multimodal-textbox"]}
 	{scale}
 	{min_width}
 	allow_overflow={false}
 	padding={container}
+	border_mode={dragging ? "focus" : "base"}
 >
 	{#if loading_status}
 		<StatusTracker
@@ -73,6 +76,7 @@
 	<MultimodalTextbox
 		bind:value
 		bind:value_is_output
+		bind:dragging
 		{file_types}
 		{root}
 		{label}
@@ -103,3 +107,11 @@
 		stream_handler={gradio.client.stream}
 	/>
 </Block>
+
+<style>
+	:global(.form .block.multimodal-textbox) {
+		box-shadow: var(--block-shadow) !important;
+		border-width: var(--block-border-width) !important;
+		border-radius: var(--block-radius) !important;
+	}
+</style>