Allow uploading more files in gr.File (#9891)

* add upload to icon buttons in file * add changeset --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Nov 2, 2024 · fc12496 · fc12496
1 parent d1cfe1e
commit fc12496
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 6 deletions.
diff --git a/.changeset/empty-monkeys-do.md b/.changeset/empty-monkeys-do.md
@@ -0,0 +1,8 @@
+---
+"@gradio/atoms": minor
+"@gradio/file": minor
+"@gradio/upload": minor
+"gradio": minor
+---
+
+feat:Allow uploading more files in gr.File
diff --git a/js/atoms/src/IconButton.svelte b/js/atoms/src/IconButton.svelte
@@ -35,6 +35,7 @@
 		class:medium={size === "medium"}
 	>
 		<svelte:component this={Icon} />
+		<slot />
 	</div>
 </button>
 

diff --git a/js/file/shared/FileUpload.svelte b/js/file/shared/FileUpload.svelte
@@ -2,8 +2,8 @@
 	import { createEventDispatcher, tick } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import type { FileData, Client } from "@gradio/client";
-	import { BlockLabel } from "@gradio/atoms";
-	import { File } from "@gradio/icons";
+	import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
+	import { File, Clear, Upload as UploadIcon } from "@gradio/icons";
 
 	import FilePreview from "./FilePreview.svelte";
 	import type { I18nFormatter } from "@gradio/utils";
@@ -26,7 +26,13 @@
 	async function handle_upload({
 		detail
 	}: CustomEvent<FileData | FileData[]>): Promise<void> {
-		value = detail;
+		if (Array.isArray(value)) {
+			value = [...value, ...(Array.isArray(detail) ? detail : [detail])];
+		} else if (value) {
+			value = [value, ...(Array.isArray(detail) ? detail : [detail])];
+		} else {
+			value = detail;
+		}
 		await tick();
 		dispatch("change", value);
 		dispatch("upload", detail);
@@ -54,7 +60,33 @@
 <BlockLabel {show_label} Icon={File} float={!value} label={label || "File"} />
 
 {#if value && (Array.isArray(value) ? value.length > 0 : true)}
-	<ModifyUpload {i18n} on:clear={handle_clear} />
+	<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>
+		<IconButton
+			Icon={Clear}
+			label={i18n("common.clear")}
+			on:click={(event) => {
+				dispatch("clear");
+				event.stopPropagation();
+				handle_clear();
+			}}
+		/>
+	</IconButtonWrapper>
+
 	<FilePreview
 		{i18n}
 		on:select

diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte
@@ -21,6 +21,7 @@
 	export let max_file_size: number | null = null;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
+	export let icon_upload = false;
 
 	let upload_id: string;
 	let file_data: FileData[];
@@ -265,7 +266,8 @@
 		class:center
 		class:boundedheight
 		class:flex
-		style:height="100%"
+		class:icon-mode={icon_upload}
+		style:height={icon_upload ? "" : "100%"}
 		tabindex={hidden ? -1 : 0}
 		on:click={paste_clipboard}
 	>
@@ -282,7 +284,8 @@
 		class:boundedheight
 		class:flex
 		class:disable_click
-		style:height="100%"
+		class:icon-mode={icon_upload}
+		style:height={icon_upload ? "" : "100%"}
 		tabindex={hidden ? -1 : 0}
 		on:drag|preventDefault|stopPropagation
 		on:dragstart|preventDefault|stopPropagation
@@ -344,4 +347,18 @@
 	input {
 		display: none;
 	}
+
+	.icon-mode {
+		position: absolute !important;
+		width: var(--size-4);
+		height: var(--size-4);
+		padding: 0;
+		min-height: 0;
+		border-radius: var(--radius-circle);
+	}
+
+	.icon-mode :global(svg) {
+		width: var(--size-4);
+		height: var(--size-4);
+	}
 </style>