Ensure all upload components have consistent upload regions. (#8803)

.changeset/slimy-items-rhyme.md

@@ -0,0 +1,10 @@
+---
+"@gradio/file": minor
+"@gradio/image": minor
+"@gradio/imageeditor": minor
+"@gradio/upload": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Ensure all upload components have consistent upload regions.

.config/playwright.config.js

@@ -19,7 +19,7 @@ const base = defineConfig({
 	timeout: 30000,
 	testMatch: /.*\.spec\.ts/,
 	testDir: "..",
-	workers: 1,
+	workers: process.env.CI ? 1 : undefined,
 	retries: 3
 });
 

js/file/Index.svelte

@@ -57,7 +57,7 @@
 
 <Block
 	{visible}
-	variant={value === null ? "dashed" : "solid"}
+	variant={value ? "solid" : "dashed"}
 	border_mode={dragging ? "focus" : "base"}
 	padding={false}
 	{elem_id}

js/image/shared/ImageUploader.svelte

@@ -178,6 +178,7 @@
 		height: 100%;
 		flex-shrink: 1;
 		max-height: 100%;
+		width: 100%;
 	}
 
 	.image-container {

js/imageeditor/Index.svelte

@@ -117,6 +117,8 @@
 			tick().then((_) => (value_is_output = false));
 		}
 	}
+
+	$: has_value = value?.background || value?.layers?.length || value?.composite;
 </script>
 
 {#if !interactive}
@@ -156,7 +158,7 @@
 {:else}
 	<Block
 		{visible}
-		variant={value === null ? "dashed" : "solid"}
+		variant={has_value ? "solid" : "dashed"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
 		{elem_id}
@@ -176,6 +178,7 @@
 		/>
 
 		<InteractiveImageEditor
+			bind:dragging
 			{canvas_size}
 			on:change={() => handle_history_change()}
 			bind:image_id

js/imageeditor/shared/ImageEditor.svelte

@@ -357,7 +357,8 @@
 		<slot />
 	</div>
 	<div
-		class="border"
+		class="canvas"
+		class:no-border={!bg && $active_tool === "bg" && !history}
 		style:width="{$crop[2] * $editor_box.child_width + 1}px"
 		style:height="{$crop[3] * $editor_box.child_height + 1}px"
 		style:top="{$crop[1] * $editor_box.child_height +
@@ -378,13 +379,17 @@
 		justify-content: center;
 		align-items: flex-start;
 	}
-	.border {
+	.canvas {
 		position: absolute;
 		border: var(--block-border-color) 1px solid;
 		pointer-events: none;
 		border-radius: var(--radius-md);
 	}
 
+	.no-border {
+		border: none;
+	}
+
 	.stage-wrap {
 		margin: var(--size-8);
 		margin-bottom: var(--size-1);

js/imageeditor/shared/InteractiveImageEditor.svelte

@@ -48,6 +48,7 @@
 	export let realtime: boolean;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
+	export let dragging: boolean;
 
 	const dispatch = createEventDispatcher<{
 		clear?: never;
@@ -221,6 +222,7 @@
 		<Layers layer_files={value?.layers || null} enable_layers={layers} />
 
 		<Sources
+			bind:dragging
 			{i18n}
 			{root}
 			{sources}

js/imageeditor/shared/tools/Sources.svelte

@@ -27,6 +27,7 @@
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
+	export let dragging: boolean;
 
 	const { active_tool } = getContext<ToolContext>(TOOL_KEY);
 	const { pixi, dimensions, register_context, reset, editor_box } =
@@ -179,13 +180,21 @@
 		{/each}
 		<span class="sep"></span>
 	</div>
-	<div class="upload-container">
+	<div
+		class="upload-container"
+		class:click-disabled={!!bg ||
+			active_mode === "webcam" ||
+			$active_tool !== "bg"}
+		style:height="{$editor_box.child_height +
+			($editor_box.child_top - $editor_box.parent_top)}px"
+	>
 		<Upload
-			hidden={true}
+			hidden={bg || active_mode === "webcam" || $active_tool !== "bg"}
 			bind:this={upload_component}
 			filetype="image/*"
 			on:load={handle_upload}
 			on:error
+			bind:dragging
 			{root}
 			disable_click={!sources.includes("upload")}
 			format="blob"
@@ -250,4 +259,19 @@
 		margin-left: var(--spacing-lg);
 		height: 100%;
 	}
+
+	.upload-container {
+		position: absolute;
+		height: 100%;
+		flex-shrink: 1;
+		max-height: 100%;
+		width: 100%;
+		left: 0;
+		top: 0;
+		/* background-color: pink; */
+	}
+
+	.upload-container.click-disabled {
+		pointer-events: none;
+	}
 </style>

js/upload/src/Upload.svelte

@@ -183,7 +183,16 @@
 			dispatch("error", `Invalid file type only ${filetype} allowed.`);
 			return false;
 		});
-		await load_files(files_to_load);
+
+		if (format != "blob") {
+			await load_files(files_to_load);
+		} else {
+			if (file_count === "single") {
+				dispatch("load", files_to_load[0]);
+				return;
+			}
+			dispatch("load", files_to_load);
+		}
 	}
 </script>
 

js/video/shared/InteractiveVideo.svelte

@@ -155,6 +155,7 @@
 
 	.upload-container {
 		height: 100%;
+		width: 100%;
 	}
 
 	.video-container {