@gradio/file 0.10.6 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @gradio/file
 
+## 0.11.0
+
+### Features
+
+- [#9891](https://github.com/gradio-app/gradio/pull/9891) [`fc12496`](https://github.com/gradio-app/gradio/commit/fc124964a1b4922e54a4ca4755f0a536dfae1a21) - Allow uploading more files in gr.File.  Thanks @hannahblair!
+- [#9887](https://github.com/gradio-app/gradio/pull/9887) [`d407c00`](https://github.com/gradio-app/gradio/commit/d407c007153705a7f5446f4601c12f208ec32a5b) - Add `.download()` event to `gr.File`.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/statustracker@0.9.4
+- @gradio/atoms@0.11.0
+- @gradio/upload@0.14.0
+- @gradio/wasm@0.15.0
+
 ## 0.10.6
 
 ### Dependency updates

package/Index.svelte

@@ -41,6 +41,7 @@
 		select: SelectData;
 		clear_status: LoadingStatus;
 		delete: FileData;
+		download: FileData;
 	}>;
 	export let file_count: "single" | "multiple" | "directory";
 	export let file_types: string[] = ["file"];
@@ -82,6 +83,7 @@
 	{#if !interactive}
 		<File
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
+			on:download={({ detail }) => gradio.dispatch("download", detail)}
 			selectable={_selectable}
 			{value}
 			{label}

package/dist/Index.svelte

@@ -65,6 +65,7 @@ let pending_upload = false;
 	{#if !interactive}
 		<File
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
+			on:download={({ detail }) => gradio.dispatch("download", detail)}
 			selectable={_selectable}
 			{value}
 			{label}

package/dist/Index.svelte.d.ts

@@ -30,6 +30,7 @@ declare const __propDef: {
             select: SelectData;
             clear_status: LoadingStatus;
             delete: FileData;
+            download: FileData;
         }>;
         file_count: "single" | "multiple" | "directory";
         file_types?: string[] | undefined;
@@ -94,6 +95,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
         select: SelectData;
         clear_status: LoadingStatus;
         delete: FileData;
+        download: FileData;
     }>;
     /**accessor*/
     set gradio(_: Gradio<{
@@ -104,6 +106,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
         select: SelectData;
         clear_status: LoadingStatus;
         delete: FileData;
+        download: FileData;
     }>);
     get file_count(): "single" | "multiple" | "directory";
     /**accessor*/

package/dist/shared/File.svelte

@@ -17,7 +17,7 @@ export let i18n;
 />
 
 {#if value && (Array.isArray(value) ? value.length > 0 : true)}
-	<FilePreview {i18n} {selectable} on:select {value} {height} />
+	<FilePreview {i18n} {selectable} on:select on:download {value} {height} />
 {:else}
 	<Empty unpadded_box={true} size="large"><File /></Empty>
 {/if}

package/dist/shared/File.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
     };
     events: {
         select: CustomEvent<import("@gradio/utils").SelectData>;
+        download: CustomEvent<FileData>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/FilePreview.svelte

@@ -37,6 +37,9 @@ function remove_file(index) {
   dispatch("delete", removed[0]);
   dispatch("change", normalized_files);
 }
+function handle_download(file) {
+  dispatch("download", file);
+}
 const is_browser = typeof window !== "undefined";
 </script>
 
@@ -63,6 +66,7 @@ const is_browser = typeof window !== "undefined";
 						{#if file.url}
 							<DownloadLink
 								href={file.url}
+								on:click={() => handle_download(file)}
 								download={is_browser && window.__is_colab__
 									? null
 									: file.orig_name}

package/dist/shared/FilePreview.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         select: CustomEvent<SelectData>;
         change: CustomEvent<any>;
         delete: CustomEvent<FileData>;
+        download: CustomEvent<FileData>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/FileUpload.svelte

@@ -1,7 +1,7 @@
 <script>import { createEventDispatcher, tick } from "svelte";
 import { Upload, ModifyUpload } from "@gradio/upload";
-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";
 export let value;
 export let label;
@@ -19,7 +19,13 @@ export let uploading = false;
 async function handle_upload({
   detail
 }) {
-  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);
@@ -38,7 +44,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

package/dist/shared/FileUpload.svelte.d.ts

@@ -18,10 +18,10 @@ declare const __propDef: {
         uploading?: boolean | undefined;
     };
     events: {
+        error: CustomEvent<any>;
         select: CustomEvent<import("@gradio/utils").SelectData>;
         change: CustomEvent<any>;
         delete: CustomEvent<FileData>;
-        error: CustomEvent<any>;
         clear: CustomEvent<undefined>;
         drag: CustomEvent<boolean>;
         upload: CustomEvent<any>;

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@gradio/file",
-  "version": "0.10.6",
+  "version": "0.11.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/atoms": "^0.10.1",
+    "@gradio/atoms": "^0.11.0",
     "@gradio/client": "^1.7.1",
     "@gradio/icons": "^0.8.1",
-    "@gradio/statustracker": "^0.9.3",
-    "@gradio/wasm": "^0.14.2",
-    "@gradio/upload": "^0.13.5",
-    "@gradio/utils": "^0.7.0"
+    "@gradio/statustracker": "^0.9.4",
+    "@gradio/upload": "^0.14.0",
+    "@gradio/utils": "^0.7.0",
+    "@gradio/wasm": "^0.15.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/File.svelte

@@ -21,7 +21,7 @@
 />
 
 {#if value && (Array.isArray(value) ? value.length > 0 : true)}
-	<FilePreview {i18n} {selectable} on:select {value} {height} />
+	<FilePreview {i18n} {selectable} on:select on:download {value} {height} />
 {:else}
 	<Empty unpadded_box={true} size="large"><File /></Empty>
 {/if}

package/shared/FilePreview.svelte

@@ -9,6 +9,7 @@
 		select: SelectData;
 		change: FileData[] | FileData;
 		delete: FileData;
+		download: FileData;
 	}>();
 	export let value: FileData | FileData[];
 	export let selectable = false;
@@ -56,6 +57,10 @@
 		dispatch("change", normalized_files);
 	}
 
+	function handle_download(file: FileData): void {
+		dispatch("download", file);
+	}
+
 	const is_browser = typeof window !== "undefined";
 </script>
 
@@ -82,6 +87,7 @@
 						{#if file.url}
 							<DownloadLink
 								href={file.url}
+								on:click={() => handle_download(file)}
 								download={is_browser && window.__is_colab__
 									? null
 									: file.orig_name}

package/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