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>

Author: 3 people

.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"`

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")}

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"
+				}
+			]
+		}
+	}}
+/>

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={{