Ensure the height param in gr.File works as expected (#10209)

* * allow height as string in gr.file * change max-height to height * add changeset * * revert file preview height change * apply height param in upload * add changeset * add story --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Dec 17, 2024 · 2700d18 · 2700d18
1 parent 314a8b5
commit 2700d18
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 8 deletions.
diff --git a/.changeset/major-walls-mix.md b/.changeset/major-walls-mix.md
@@ -0,0 +1,7 @@
+---
+"@gradio/file": patch
+"@gradio/upload": patch
+"gradio": patch
+---
+
+fix:Ensure the `height` param in `gr.File` works as expected 
diff --git a/gradio/components/file.py b/gradio/components/file.py
@@ -54,7 +54,7 @@ def __init__(
         container: bool = True,
         scale: int | None = None,
         min_width: int = 160,
-        height: int | float | None = None,
+        height: int | str | float | None = None,
         interactive: bool | None = None,
         visible: bool = True,
         elem_id: str | None = None,

diff --git a/js/file/File.stories.svelte b/js/file/File.stories.svelte
@@ -1,11 +1,11 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import FilePreview from "./shared/FilePreview.svelte";
+	import File from "./Index.svelte";
 </script>
 
 <Meta
 	title="Components/File"
-	component={FilePreview}
+	component={File}
 	argTypes={{
 		value: {
 			control: "text",
@@ -17,7 +17,7 @@
 />
 
 <Template let:args>
-	<FilePreview {...args} />
+	<File {...args} />
 </Template>
 
 <Story
@@ -54,3 +54,11 @@
 		allow_reordering: true
 	}}
 />
+<Story
+	name="File upload with height set to 400px"
+	args={{
+		interactive: true,
+		value: null,
+		height: 400
+	}}
+/>
diff --git a/js/file/shared/FilePreview.svelte b/js/file/shared/FilePreview.svelte
@@ -13,7 +13,7 @@
 	}>();
 	export let value: FileData | FileData[];
 	export let selectable = false;
-	export let height: number | undefined = undefined;
+	export let height: number | string | undefined = undefined;
 	export let i18n: I18nFormatter;
 	export let allow_reordering = false;
 
@@ -124,7 +124,11 @@
 
 <div
 	class="file-preview-holder"
-	style="max-height: {typeof height === undefined ? 'auto' : height + 'px'};"
+	style:max-height={height
+		? typeof height === "number"
+			? height + "px"
+			: height
+		: "auto"}
 >
 	<table class="file-preview">
 		<tbody>

diff --git a/js/file/shared/FileUpload.svelte b/js/file/shared/FileUpload.svelte
@@ -112,6 +112,7 @@
 		on:error
 		{stream_handler}
 		{upload}
+		{height}
 	>
 		<slot />
 	</Upload>

diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte
@@ -22,6 +22,7 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let icon_upload = false;
+	export let height: number | string | undefined = undefined;
 
 	let upload_id: string;
 	let file_data: FileData[];
@@ -267,7 +268,13 @@
 		class:boundedheight
 		class:flex
 		class:icon-mode={icon_upload}
-		style:height={icon_upload ? "" : "100%"}
+		style:height={icon_upload
+			? ""
+			: height
+				? typeof height === "number"
+					? height + "px"
+					: height
+				: "100%"}
 		tabindex={hidden ? -1 : 0}
 		on:click={paste_clipboard}
 	>
@@ -285,7 +292,13 @@
 		class:flex
 		class:disable_click
 		class:icon-mode={icon_upload}
-		style:height={icon_upload ? "" : "100%"}
+		style:height={icon_upload
+			? ""
+			: height
+				? typeof height === "number"
+					? height + "px"
+					: height
+				: "100%"}
 		tabindex={hidden ? -1 : 0}
 		on:drag|preventDefault|stopPropagation
 		on:dragstart|preventDefault|stopPropagation