From a966e9f753af25eb9d813dfdbce39be6f3014d82 Mon Sep 17 00:00:00 2001
From: Abubakar Abid <abubakar@huggingface.co>
Date: Tue, 12 Nov 2024 14:39:57 -0800
Subject: [PATCH] Hide upload button after upload when `file_count="single"`
 (#9946)

* format'

* add changeset

* add story

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Hannah <hannahblair@users.noreply.github.com>
---
 .changeset/nice-rice-smash.md                 |  7 +++
 js/file/shared/FileUpload.svelte              | 32 +++++++------
 .../MultimodalTextbox.stories.svelte          | 14 ++++++
 .../shared/MultimodalTextbox.svelte           | 46 ++++++++++---------
 4 files changed, 62 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/nice-rice-smash.md

diff --git a/.changeset/nice-rice-smash.md b/.changeset/nice-rice-smash.md
new file mode 100644
index 0000000000..d50ca87ff8
--- /dev/null
+++ b/.changeset/nice-rice-smash.md
@@ -0,0 +1,7 @@
+---
+"@gradio/file": patch
+"@gradio/multimodaltextbox": patch
+"gradio": patch
+---
+
+fix:Hide upload button after upload when `file_count="single"`
diff --git a/js/file/shared/FileUpload.svelte b/js/file/shared/FileUpload.svelte
index 11f1957390..051137b50d 100644
--- a/js/file/shared/FileUpload.svelte
+++ b/js/file/shared/FileUpload.svelte
@@ -61,21 +61,23 @@
 
 {#if value && (Array.isArray(value) ? value.length > 0 : true)}
 	<IconButtonWrapper>
-		<IconButton Icon={UploadIcon} label={i18n("common.upload")}>
-			<Upload
-				icon_upload={true}
-				on:load={handle_upload}
-				filetype={file_types}
-				{file_count}
-				{max_file_size}
-				{root}
-				bind:dragging
-				bind:uploading
-				on:error
-				{stream_handler}
-				{upload}
-			/>
-		</IconButton>
+		{#if !(file_count === "single" && (Array.isArray(value) ? value.length > 0 : value !== null))}
+			<IconButton Icon={UploadIcon} label={i18n("common.upload")}>
+				<Upload
+					icon_upload={true}
+					on:load={handle_upload}
+					filetype={file_types}
+					{file_count}
+					{max_file_size}
+					{root}
+					bind:dragging
+					bind:uploading
+					on:error
+					{stream_handler}
+					{upload}
+				/>
+			</IconButton>
+		{/if}
 		<IconButton
 			Icon={Clear}
 			label={i18n("common.clear")}
diff --git a/js/multimodaltextbox/MultimodalTextbox.stories.svelte b/js/multimodaltextbox/MultimodalTextbox.stories.svelte
index 5ae2a6e17f..d0739e566f 100644
--- a/js/multimodaltextbox/MultimodalTextbox.stories.svelte
+++ b/js/multimodaltextbox/MultimodalTextbox.stories.svelte
@@ -73,3 +73,17 @@
 />
 <Story name="Right aligned textbox" args={{ text_align: "right" }} />
 <Story name="RTL textbox" args={{ rtl: true }} />
+<Story
+	name="Single file upload"
+	args={{
+		file_count: "single",
+		value: {
+			text: "sample text",
+			files: [
+				{
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
+				}
+			]
+		}
+	}}
+/>
diff --git a/js/multimodaltextbox/shared/MultimodalTextbox.svelte b/js/multimodaltextbox/shared/MultimodalTextbox.svelte
index 4cf2e30ca3..6a10fc5edb 100644
--- a/js/multimodaltextbox/shared/MultimodalTextbox.svelte
+++ b/js/multimodaltextbox/shared/MultimodalTextbox.svelte
@@ -315,28 +315,30 @@
 			</div>
 		{/if}
 		<div class="input-container">
-			<Upload
-				bind:this={upload_component}
-				on:load={handle_upload}
-				{file_count}
-				filetype={file_types}
-				{root}
-				{max_file_size}
-				bind:dragging
-				bind:uploading
-				show_progress={false}
-				disable_click={true}
-				bind:hidden_upload
-				on:error
-				hidden={true}
-				{upload}
-				{stream_handler}
-			></Upload>
-			<button
-				data-testid="upload-button"
-				class="upload-button"
-				on:click={handle_upload_click}><Paperclip /></button
-			>
+			{#if !disabled && !(file_count === "single" && value.files.length > 0)}
+				<Upload
+					bind:this={upload_component}
+					on:load={handle_upload}
+					{file_count}
+					filetype={file_types}
+					{root}
+					{max_file_size}
+					bind:dragging
+					bind:uploading
+					show_progress={false}
+					disable_click={true}
+					bind:hidden_upload
+					on:error
+					hidden={true}
+					{upload}
+					{stream_handler}
+				></Upload>
+				<button
+					data-testid="upload-button"
+					class="upload-button"
+					on:click={handle_upload_click}><Paperclip /></button
+				>
+			{/if}
 			<textarea
 				data-testid="textbox"
 				use:text_area_resize={{