@gradio/file 0.13.1 → 0.14.1

package/CHANGELOG.md

@@ -1,4 +1,49 @@
 # @gradio/file
+
+## 0.14.1
+
+### Fixes
+
+- [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons.  Thanks @freddyaboulton!
+- [#12698](https://github.com/gradio-app/gradio/pull/12698) [`db86165`](https://github.com/gradio-app/gradio/commit/db86165535386991701ea89b2083ef5e60cd23e8) - Migrates gr.File.  Thanks @aliabid94!
+- [#12779](https://github.com/gradio-app/gradio/pull/12779) [`ea2d3e9`](https://github.com/gradio-app/gradio/commit/ea2d3e985a8b42d188e551f517c5825c00790628) - Migrate Audio + Upload + Atoms to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.12.2
+- @gradio/atoms@0.20.1
+- @gradio/utils@0.11.2
+- @gradio/icons@0.15.1
+- @gradio/upload@0.17.4
+- @gradio/client@2.0.3
+
+## 0.14.0
+
+### Dependency updates
+
+- @gradio/utils@0.11.1
+- @gradio/client@2.0.2
+
+## 0.14.0
+
+### Features
+
+- [#12539](https://github.com/gradio-app/gradio/pull/12539) [`f1d83fa`](https://github.com/gradio-app/gradio/commit/f1d83fac3d6e4bad60cf896a026fa2d572f26073) - Add ability to add custom buttons to components.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.20.0
+- @gradio/utils@0.11.0
+- @gradio/client@2.0.1
+- @gradio/statustracker@0.12.1
+- @gradio/upload@0.17.3
+
+## 0.13.1
+
+### Dependency updates
+
+- @gradio/utils@0.10.4
+
 ## 0.13.1
 
 ### Features

package/Example.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/client";
 
-	export let value: FileData | null;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	let {
+		value,
+		type,
+		selected = false
+	}: {
+		value: FileData | null;
+		type: "gallery" | "table";
+		selected: boolean;
+	} = $props();
 </script>
 
 <div

package/File.stories.svelte

@@ -1,64 +1,67 @@
-<script>
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import File from "./Index.svelte";
-</script>
+	import { wrapProps } from "../storybook/wrapProps";
+
+	const cheetah = "/cheetah.jpg";
+	const bus = "/bus.png";
 
-<Meta
-	title="Components/File"
-	component={File}
-	argTypes={{
-		value: {
-			control: "text",
-			description: "The URL or filepath (or list of URLs or filepaths)",
-			name: "value",
-			value: []
+	const { Story } = defineMeta({
+		title: "Components/File",
+		component: File,
+		argTypes: {
+			value: {
+				control: "text",
+				description: "The URL or filepath (or list of URLs or filepaths)",
+				name: "value",
+				value: []
+			}
 		}
-	}}
-/>
+	});
+</script>
 
-<Template let:args>
-	<File {...args} />
-</Template>
+{#snippet template(args)}
+	<File {...wrapProps(args)} />
+{/snippet}
 
 <Story
 	name="Single File"
 	args={{
 		value: [
 			{
-				path: "cheetah.jpg",
+				path: cheetah,
 				orig_name: "cheetah.jpg",
-				url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+				url: cheetah,
 				size: 10000
 			}
 		]
 	}}
+	{template}
 />
 <Story
 	name="Multiple files, with height set to 150px and reordering enabled"
 	args={{
 		value: [
 			{
-				path: "cheetah.jpg",
-				orig_name: "cheetah.jpgz",
-				url: "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",
+				path: bus,
+				orig_name: "bus.png",
+				url: bus,
 				size: 10000
 			},
 			{
-				path: "cheetah.jpgs",
+				path: cheetah,
 				orig_name: "cheetah.jpg",
-				url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+				url: cheetah,
 				size: 10000
 			}
 		],
 		height: 150,
 		allow_reordering: true
 	}}
+	{template}
 />
 <Story
 	name="File upload with height set to 400px"
-	args={{
-		interactive: true,
-		value: null,
-		height: 400
-	}}
+	args={{ interactive: true, value: null, height: 400 }}
+	{template}
 />

package/FileUpload.stories.svelte

@@ -1,12 +1,14 @@
-<script context="module">
-	import { Template, Story } from "@storybook/addon-svelte-csf";
-	import { format } from "svelte-i18n";
-	import FileUpload from "./shared/FileUpload.svelte";
-	import { get } from "svelte/store";
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import File from "./Index.svelte";
+	import { wrapProps } from "../storybook/wrapProps";
 
-	export const meta = {
+	const cheetah = "/cheetah.jpg";
+	const lion = "/lion.jpg";
+
+	const { Story } = defineMeta({
 		title: "Components/FileUpload",
-		component: FileUpload,
+		component: File,
 		argTypes: {
 			value: {
 				control: "text",
@@ -22,43 +24,53 @@
 				value: "single"
 			}
 		}
-	};
+	});
 </script>
 
-<Template let:args>
-	<FileUpload {...args} i18n={get(format)} />
-</Template>
+{#snippet template(args)}
+	<File {...wrapProps(args)} />
+{/snippet}
 
 <Story
 	name="Single File"
 	args={{
 		value: [
 			{
-				path: "cheetah.jpg",
+				path: cheetah,
 				orig_name: "cheetah.jpg",
-				url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+				url: cheetah,
 				size: 10000
 			}
 		],
-		file_count: "single"
+		file_count: "single",
+		interactive: true
 	}}
+	{template}
 />
 <Story
 	name="Multiple files"
 	args={{
-		value: Array(2).fill({
-			path: "cheetah.jpg",
-			orig_name: "cheetah.jpg",
-			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
-			size: 10000
-		}),
-		file_count: "multiple"
+		value: [
+			{
+				path: cheetah,
+				orig_name: "cheetah.jpg",
+				url: cheetah,
+				size: 10000
+			},
+			{
+				path: lion,
+				orig_name: "lion.jpg",
+				url: lion,
+				size: 10000
+			}
+		],
+		file_count: "multiple",
+		interactive: true
 	}}
+	{template}
 />
 <Story
 	name="No value"
-	args={{
-		value: null,
-		file_count: "multiple"
-	}}
+	args={{ value: null, file_count: "multiple", interactive: true }}
+	{template}
 />

package/Index.svelte

@@ -13,11 +13,12 @@
 	import FileUpload from "./shared/FileUpload.svelte";
 	import { Block, UploadText } from "@gradio/atoms";
 	import type { FileEvents, FileProps } from "./types";
+	import type { SelectData } from "@gradio/utils";
 	import { StatusTracker } from "@gradio/statustracker";
 	import { tick } from "svelte";
 
 	const props = $props();
-	let upload_promise = $state<Promise<any>>();
+	let upload_promise = $state<Promise<any> | null>(null);
 
 	let dragging = $state(false);
 	let pending_upload = $state(false);
@@ -78,6 +79,10 @@
 			show_label={gradio.shared.show_label}
 			height={gradio.props.height}
 			i18n={gradio.i18n}
+			buttons={gradio.props.buttons}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
 		/>
 	{:else}
 		<FileUpload
@@ -90,23 +95,27 @@
 			file_count={gradio.props.file_count}
 			file_types={gradio.props.file_types}
 			selectable={gradio.props._selectable}
-			height={gradio.props.height}
+			height={gradio.props.height ?? undefined}
 			root={gradio.shared.root}
 			allow_reordering={gradio.props.allow_reordering}
 			max_file_size={gradio.shared.max_file_size}
-			on:change={({ detail }) => {
+			buttons={gradio.props.buttons}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
+			onchange={(detail) => {
 				gradio.props.value = detail;
 			}}
-			on:drag={({ detail }) => (dragging = detail)}
-			on:clear={() => gradio.dispatch("clear")}
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:upload={() => gradio.dispatch("upload")}
-			on:error={({ detail }) => {
+			ondrag={(detail) => (dragging = detail)}
+			onclear={() => gradio.dispatch("clear")}
+			onselect={(detail: SelectData) => gradio.dispatch("select", detail)}
+			onupload={() => gradio.dispatch("upload")}
+			onerror={(error) => {
 				gradio.shared.loading_status = gradio.shared.loading_status || {};
 				gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", detail);
+				gradio.dispatch("error", error);
 			}}
-			on:delete={({ detail }) => {
+			ondelete={(detail) => {
 				gradio.dispatch("delete", detail);
 			}}
 			i18n={gradio.i18n}

package/dist/Example.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/client";
 
-	export let value: FileData | null;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	let {
+		value,
+		type,
+		selected = false
+	}: {
+		value: FileData | null;
+		type: "gallery" | "table";
+		selected: boolean;
+	} = $props();
 </script>
 
 <div

package/dist/Example.svelte.d.ts

@@ -1,23 +1,9 @@
 import type { FileData } from "@gradio/client";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Example: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: FileData | null;
     type: "gallery" | "table";
-    selected?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Example = InstanceType<typeof Example>;
+    selected: boolean;
+};
+declare const Example: import("svelte").Component<$$ComponentProps, {}, "">;
+type Example = ReturnType<typeof Example>;
 export default Example;

package/dist/Index.svelte

@@ -13,11 +13,12 @@
 	import FileUpload from "./shared/FileUpload.svelte";
 	import { Block, UploadText } from "@gradio/atoms";
 	import type { FileEvents, FileProps } from "./types";
+	import type { SelectData } from "@gradio/utils";
 	import { StatusTracker } from "@gradio/statustracker";
 	import { tick } from "svelte";
 
 	const props = $props();
-	let upload_promise = $state<Promise<any>>();
+	let upload_promise = $state<Promise<any> | null>(null);
 
 	let dragging = $state(false);
 	let pending_upload = $state(false);
@@ -78,6 +79,10 @@
 			show_label={gradio.shared.show_label}
 			height={gradio.props.height}
 			i18n={gradio.i18n}
+			buttons={gradio.props.buttons}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
 		/>
 	{:else}
 		<FileUpload
@@ -90,23 +95,27 @@
 			file_count={gradio.props.file_count}
 			file_types={gradio.props.file_types}
 			selectable={gradio.props._selectable}
-			height={gradio.props.height}
+			height={gradio.props.height ?? undefined}
 			root={gradio.shared.root}
 			allow_reordering={gradio.props.allow_reordering}
 			max_file_size={gradio.shared.max_file_size}
-			on:change={({ detail }) => {
+			buttons={gradio.props.buttons}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
+			onchange={(detail) => {
 				gradio.props.value = detail;
 			}}
-			on:drag={({ detail }) => (dragging = detail)}
-			on:clear={() => gradio.dispatch("clear")}
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:upload={() => gradio.dispatch("upload")}
-			on:error={({ detail }) => {
+			ondrag={(detail) => (dragging = detail)}
+			onclear={() => gradio.dispatch("clear")}
+			onselect={(detail: SelectData) => gradio.dispatch("select", detail)}
+			onupload={() => gradio.dispatch("upload")}
+			onerror={(error) => {
 				gradio.shared.loading_status = gradio.shared.loading_status || {};
 				gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", detail);
+				gradio.dispatch("error", error);
 			}}
-			on:delete={({ detail }) => {
+			ondelete={(detail) => {
 				gradio.dispatch("delete", detail);
 			}}
 			i18n={gradio.i18n}

package/dist/shared/File.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { BlockLabel, Empty } from "@gradio/atoms";
+	import { BlockLabel, Empty, IconButtonWrapper } from "@gradio/atoms";
 	import { File } from "@gradio/icons";
 	import FilePreview from "./FilePreview.svelte";
+	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 
 	let {
 		value,
@@ -10,11 +11,16 @@
 		selectable,
 		i18n,
 		height,
+		buttons = null,
+		on_custom_button_click = null,
 		on_select,
 		on_download
 	} = $props();
 </script>
 
+{#if show_label && buttons && buttons.length > 0}
+	<IconButtonWrapper {buttons} {on_custom_button_click} />
+{/if}
 <BlockLabel
 	{show_label}
 	float={value === null}

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

@@ -6,6 +6,8 @@ declare const File: import("svelte").Component<{
     selectable: any;
     i18n: any;
     height: any;
+    buttons?: any;
+    on_custom_button_click?: any;
     on_select: any;
     on_download: any;
 }, {}, "">;

package/dist/shared/FilePreview.svelte

@@ -1,24 +1,33 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/client";
 	import { prettyBytes } from "./utils";
-	import { createEventDispatcher } from "svelte";
 	import type { I18nFormatter, SelectData } from "@gradio/utils";
 	import { DownloadLink } from "@gradio/atoms";
 
-	const dispatch = createEventDispatcher<{
-		select: SelectData;
-		change: FileData[] | FileData;
-		delete: FileData;
-		download: FileData;
-	}>();
-	export let value: FileData | FileData[];
-	export let selectable = false;
-	export let height: number | string | undefined = undefined;
-	export let i18n: I18nFormatter;
-	export let allow_reordering = false;
-
-	let dragging_index: number | null = null;
-	let drop_target_index: number | null = null;
+	let {
+		value,
+		selectable = false,
+		height = undefined,
+		i18n,
+		allow_reordering = false,
+		onselect,
+		onchange,
+		ondelete,
+		ondownload
+	}: {
+		value: FileData | FileData[];
+		selectable?: boolean;
+		height?: number | string | undefined;
+		i18n: I18nFormatter;
+		allow_reordering?: boolean;
+		onselect?: (event_data: SelectData) => void;
+		onchange?: (event_data: FileData[] | FileData) => void;
+		ondelete?: (event_data: FileData) => void;
+		ondownload?: (event_data: FileData) => void;
+	} = $props();
+
+	let dragging_index: number | null = $state(null);
+	let drop_target_index: number | null = $state(null);
 
 	function handle_drag_start(event: DragEvent, index: number): void {
 		dragging_index = index;
@@ -68,7 +77,7 @@
 		);
 
 		const new_value = Array.isArray(value) ? files : files[0];
-		dispatch("change", new_value);
+		onchange?.(new_value);
 
 		dragging_index = null;
 		drop_target_index = null;
@@ -82,14 +91,18 @@
 		return [filename.slice(0, last_dot), filename.slice(last_dot)];
 	}
 
-	$: normalized_files = (Array.isArray(value) ? value : [value]).map((file) => {
-		const [filename_stem, filename_ext] = split_filename(file.orig_name ?? "");
-		return {
-			...file,
-			filename_stem,
-			filename_ext
-		};
-	});
+	let normalized_files = $derived(
+		(Array.isArray(value) ? value : [value]).map((file) => {
+			const [filename_stem, filename_ext] = split_filename(
+				file.orig_name ?? ""
+			);
+			return {
+				...file,
+				filename_stem,
+				filename_ext
+			};
+		})
+	);
 
 	function handle_row_click(
 		event: MouseEvent & { currentTarget: HTMLTableRowElement },
@@ -103,20 +116,21 @@
 				event.composedPath().includes(tr.firstElementChild)); // Or if the click is on the name column
 
 		if (should_select) {
-			dispatch("select", { value: normalized_files[index].orig_name, index });
+			onselect?.({ value: normalized_files[index].orig_name, index });
 		}
 	}
 
 	function remove_file(index: number): void {
-		const removed = normalized_files.splice(index, 1);
-		normalized_files = [...normalized_files];
-		value = normalized_files;
-		dispatch("delete", removed[0]);
-		dispatch("change", normalized_files);
+		const files = Array.isArray(value) ? [...value] : [value];
+		const removed = files.splice(index, 1);
+		const new_value = Array.isArray(value) ? files : files[0];
+		value = new_value;
+		ondelete?.(removed[0]);
+		onchange?.(new_value);
 	}
 
 	function handle_download(file: FileData): void {
-		dispatch("download", file);
+		ondownload?.(file);
 	}
 
 	const is_browser = typeof window !== "undefined";
@@ -147,14 +161,14 @@
 							? "after"
 							: "before"}
 					draggable={allow_reordering && normalized_files.length > 1}
-					on:click={(event) => {
+					onclick={(event) => {
 						handle_row_click(event, i);
 					}}
-					on:dragstart={(event) => handle_drag_start(event, i)}
-					on:dragenter|preventDefault
-					on:dragover={(event) => handle_drag_over(event, i)}
-					on:drop={(event) => handle_drop(event, i)}
-					on:dragend={handle_drag_end}
+					ondragstart={(event) => handle_drag_start(event, i)}
+					ondragenter={(event) => event.preventDefault()}
+					ondragover={(event) => handle_drag_over(event, i)}
+					ondrop={(event) => handle_drop(event, i)}
+					ondragend={handle_drag_end}
 				>
 					<td class="filename" aria-label={file.orig_name}>
 						{#if allow_reordering && normalized_files.length > 1}
@@ -187,10 +201,10 @@
 							<button
 								class="label-clear-button"
 								aria-label="Remove this file"
-								on:click={() => {
+								onclick={() => {
 									remove_file(i);
 								}}
-								on:keydown={(event) => {
+								onkeydown={(event) => {
 									if (event.key === "Enter") {
 										remove_file(i);
 									}

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

@@ -1,32 +1,16 @@
 import type { FileData } from "@gradio/client";
 import type { I18nFormatter, SelectData } from "@gradio/utils";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FilePreview: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: FileData | FileData[];
     selectable?: boolean;
     height?: number | string | undefined;
     i18n: I18nFormatter;
     allow_reordering?: boolean;
-}, {
-    dragenter: DragEvent;
-    select: CustomEvent<SelectData>;
-    change: CustomEvent<FileData | FileData[]>;
-    delete: CustomEvent<FileData>;
-    download: CustomEvent<FileData>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FilePreview = InstanceType<typeof FilePreview>;
+    onselect?: (event_data: SelectData) => void;
+    onchange?: (event_data: FileData[] | FileData) => void;
+    ondelete?: (event_data: FileData) => void;
+    ondownload?: (event_data: FileData) => void;
+};
+declare const FilePreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type FilePreview = ReturnType<typeof FilePreview>;
 export default FilePreview;