From 2700d1898bc8eeb3fd9f65ce77be17c2614a388f Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:59:20 +0000
Subject: [PATCH] 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 <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/major-walls-mix.md     |  7 +++++++
 gradio/components/file.py         |  2 +-
 js/file/File.stories.svelte       | 14 +++++++++++---
 js/file/shared/FilePreview.svelte |  8 ++++++--
 js/file/shared/FileUpload.svelte  |  1 +
 js/upload/src/Upload.svelte       | 17 +++++++++++++++--
 6 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/major-walls-mix.md

diff --git a/.changeset/major-walls-mix.md b/.changeset/major-walls-mix.md
new file mode 100644
index 0000000000..192d98ecdd
--- /dev/null
+++ 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
index b1da874ffc..10bf34f357 100644
--- a/gradio/components/file.py
+++ b/gradio/components/file.py
@@ -54,7 +54,7 @@ class File(Component):
         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
index 166385df86..660e3d9078 100644
--- 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
index e1ef2c4b65..93d8aadd10 100644
--- 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
index 7ccca24d31..44f81ba8bd 100644
--- 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
index a121c4bfbe..63466287df 100644
--- 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