@gradio/file 0.14.0 → 0.14.2

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @gradio/file
 
+## 0.14.2
+
+### Dependency updates
+
+- @gradio/atoms@0.21.0
+- @gradio/client@2.0.4
+- @gradio/statustracker@0.12.3
+- @gradio/upload@0.17.5
+
+## 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

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);
@@ -94,7 +95,7 @@
 			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}
@@ -102,19 +103,19 @@
 			on_custom_button_click={(id) => {
 				gradio.dispatch("custom_button_click", { id });
 			}}
-			on:change={({ detail }) => {
+			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);
@@ -94,7 +95,7 @@
 			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}
@@ -102,19 +103,19 @@
 			on_custom_button_click={(id) => {
 				gradio.dispatch("custom_button_click", { id });
 			}}
-			on:change={({ detail }) => {
+			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/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;

package/dist/shared/FileUpload.svelte

@@ -1,36 +1,67 @@
 <script lang="ts">
-	import { createEventDispatcher, tick } from "svelte";
+	import { tick } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import type { FileData, Client } from "@gradio/client";
 	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";
+	import type { I18nFormatter, SelectData } from "@gradio/utils";
 	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 
-	export let value: null | FileData | FileData[];
+	let {
+		value = $bindable<null | FileData | FileData[]>(),
+		label,
+		show_label = true,
+		file_count = "single",
+		file_types = null,
+		selectable = false,
+		root,
+		height = undefined,
+		i18n,
+		max_file_size = null,
+		upload,
+		stream_handler,
+		uploading = $bindable(false),
+		allow_reordering = false,
+		upload_promise = $bindable<Promise<(FileData | null)[]> | null>(),
+		buttons = null,
+		on_custom_button_click = null,
+		onchange,
+		onclear,
+		ondrag,
+		onupload,
+		onerror,
+		ondelete,
+		onselect
+	}: {
+		value: null | FileData | FileData[];
+		label: string;
+		show_label?: boolean;
+		file_count: "single" | "multiple" | "directory";
+		file_types: string[] | null;
+		selectable?: boolean;
+		root: string;
+		height?: number | undefined;
+		i18n: I18nFormatter;
+		max_file_size: number | null;
+		upload: Client["upload"];
+		stream_handler: Client["stream"];
+		uploading?: boolean;
+		allow_reordering?: boolean;
+		upload_promise?: Promise<(FileData | null)[]> | null;
+		buttons?: (string | CustomButtonType)[] | null;
+		on_custom_button_click?: ((id: number) => void) | null;
+		onchange?: (event_data: FileData[] | FileData | null) => void;
+		onclear?: () => void;
+		ondrag?: (dragging: boolean) => void;
+		onupload?: (event_data: FileData[] | FileData) => void;
+		onerror?: (error: string) => void;
+		ondelete?: (event_data: FileData) => void;
+		onselect?: (event_data: SelectData) => void;
+	} = $props();
 
-	export let label: string;
-	export let show_label = true;
-	export let file_count: "single" | "multiple" | "directory" = "single";
-	export let file_types: string[] | null = null;
-	export let selectable = false;
-	export let root: string;
-	export let height: number | undefined = undefined;
-	export let i18n: I18nFormatter;
-	export let max_file_size: number | null = null;
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let uploading = false;
-	export let allow_reordering = false;
-	export let upload_promise: Promise<(FileData | null)[]> | null = null;
-	export let buttons: (string | CustomButtonType)[] | null = null;
-	export let on_custom_button_click: ((id: number) => void) | null = null;
-
-	async function handle_upload({
-		detail
-	}: CustomEvent<FileData | FileData[]>): Promise<void> {
+	async function handle_upload(detail: FileData | FileData[]): Promise<void> {
 		if (Array.isArray(value)) {
 			value = [...value, ...(Array.isArray(detail) ? detail : [detail])];
 		} else if (value) {
@@ -39,27 +70,17 @@
 			value = detail;
 		}
 		await tick();
-		dispatch("change", value);
-		dispatch("upload", detail);
+		onchange?.(value);
+		onupload?.(value);
 	}
 
 	function handle_clear(): void {
 		value = null;
-		dispatch("change", null);
-		dispatch("clear");
+		onchange?.(null);
+		onclear?.();
 	}
 
-	const dispatch = createEventDispatcher<{
-		change: FileData[] | FileData | null;
-		clear: undefined;
-		drag: boolean;
-		upload: FileData[] | FileData;
-		load: FileData[] | FileData;
-		error: string;
-	}>();
-
-	let dragging = false;
-	$: dispatch("drag", dragging);
+	let dragging = $state(false);
 </script>
 
 {#if show_label && buttons && buttons.length > 0}
@@ -74,14 +95,14 @@
 				<Upload
 					bind:upload_promise
 					icon_upload={true}
-					on:load={handle_upload}
+					onload={handle_upload}
 					filetype={file_types}
 					{file_count}
 					{max_file_size}
 					{root}
 					bind:dragging
 					bind:uploading
-					on:error
+					{onerror}
 					{stream_handler}
 					{upload}
 				/>
@@ -90,8 +111,7 @@
 		<IconButton
 			Icon={Clear}
 			label={i18n("common.clear")}
-			on:click={(event) => {
-				dispatch("clear");
+			onclick={(event) => {
 				event.stopPropagation();
 				handle_clear();
 			}}
@@ -100,25 +120,25 @@
 
 	<FilePreview
 		{i18n}
-		on:select
+		{onselect}
 		{selectable}
 		{value}
 		{height}
-		on:change
-		on:delete
+		{onchange}
+		{ondelete}
 		{allow_reordering}
 	/>
 {:else}
 	<Upload
 		bind:upload_promise
-		on:load={handle_upload}
+		onload={handle_upload}
 		filetype={file_types}
 		{file_count}
 		{max_file_size}
 		{root}
 		bind:dragging
 		bind:uploading
-		on:error
+		{onerror}
 		{stream_handler}
 		{upload}
 		{height}

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

@@ -1,6 +1,32 @@
 import type { FileData, Client } from "@gradio/client";
-import type { I18nFormatter } from "@gradio/utils";
+import type { I18nFormatter, SelectData } from "@gradio/utils";
 import type { CustomButton as CustomButtonType } from "@gradio/utils";
+type $$ComponentProps = {
+    value: null | FileData | FileData[];
+    label: string;
+    show_label?: boolean;
+    file_count: "single" | "multiple" | "directory";
+    file_types: string[] | null;
+    selectable?: boolean;
+    root: string;
+    height?: number | undefined;
+    i18n: I18nFormatter;
+    max_file_size: number | null;
+    upload: Client["upload"];
+    stream_handler: Client["stream"];
+    uploading?: boolean;
+    allow_reordering?: boolean;
+    upload_promise?: Promise<(FileData | null)[]> | null;
+    buttons?: (string | CustomButtonType)[] | null;
+    on_custom_button_click?: ((id: number) => void) | null;
+    onchange?: (event_data: FileData[] | FileData | null) => void;
+    onclear?: () => void;
+    ondrag?: (dragging: boolean) => void;
+    onupload?: (event_data: FileData[] | FileData) => void;
+    onerror?: (error: string) => void;
+    ondelete?: (event_data: FileData) => void;
+    onselect?: (event_data: SelectData) => void;
+};
 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;
@@ -19,39 +45,12 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } ? Props extends Record<string, never> ? any : {
     children?: any;
 } : {});
-declare const FileUpload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    value: null | FileData | FileData[];
-    label: string;
-    show_label?: boolean;
-    file_count?: "single" | "multiple" | "directory";
-    file_types?: string[] | null;
-    selectable?: boolean;
-    root: string;
-    height?: number | undefined;
-    i18n: I18nFormatter;
-    max_file_size?: number | null;
-    upload: Client["upload"];
-    stream_handler: Client["stream"];
-    uploading?: boolean;
-    allow_reordering?: boolean;
-    upload_promise?: Promise<(FileData | null)[]> | null;
-    buttons?: (string | CustomButtonType)[] | null;
-    on_custom_button_click?: ((id: number) => void) | null;
-}, {
+declare const FileUpload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<$$ComponentProps, {
     default: {};
 }>, {
-    error: CustomEvent<any>;
-    select: CustomEvent<import("@gradio/utils").SelectData>;
-    change: CustomEvent<any>;
-    delete: CustomEvent<FileData>;
-    clear: CustomEvent<undefined>;
-    drag: CustomEvent<boolean>;
-    upload: CustomEvent<FileData | FileData[]>;
-    load: CustomEvent<FileData | FileData[]>;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
-}, {}, string>;
+}, {}, "value" | "uploading" | "upload_promise">;
 type FileUpload = InstanceType<typeof FileUpload>;
 export default FileUpload;

package/dist/types.d.ts

@@ -19,7 +19,7 @@ export interface FileEvents {
     clear: void;
     select: SelectData | null;
     change: FileData | FileData[] | null;
-    delete: void;
+    delete: FileData;
     custom_button_click: {
         id: number;
     };

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@gradio/file",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/atoms": "^0.20.0",
-    "@gradio/client": "^2.0.1",
-    "@gradio/statustracker": "^0.12.1",
-    "@gradio/icons": "^0.15.0",
-    "@gradio/upload": "^0.17.3",
-    "@gradio/utils": "^0.11.0"
+    "@gradio/atoms": "^0.21.0",
+    "@gradio/icons": "^0.15.1",
+    "@gradio/client": "^2.0.4",
+    "@gradio/statustracker": "^0.12.3",
+    "@gradio/utils": "^0.11.2",
+    "@gradio/upload": "^0.17.5"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.15.1"
+    "@gradio/preview": "^0.15.2"
   },
   "main": "./Index.svelte",
   "main_changeset": true,
@@ -33,7 +33,7 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "svelte": "^5.43.4"
+    "svelte": "^5.48.0"
   },
   "repository": {
     "type": "git",

package/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/shared/FileUpload.svelte

@@ -1,36 +1,67 @@
 <script lang="ts">
-	import { createEventDispatcher, tick } from "svelte";
+	import { tick } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import type { FileData, Client } from "@gradio/client";
 	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";
+	import type { I18nFormatter, SelectData } from "@gradio/utils";
 	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 
-	export let value: null | FileData | FileData[];
+	let {
+		value = $bindable<null | FileData | FileData[]>(),
+		label,
+		show_label = true,
+		file_count = "single",
+		file_types = null,
+		selectable = false,
+		root,
+		height = undefined,
+		i18n,
+		max_file_size = null,
+		upload,
+		stream_handler,
+		uploading = $bindable(false),
+		allow_reordering = false,
+		upload_promise = $bindable<Promise<(FileData | null)[]> | null>(),
+		buttons = null,
+		on_custom_button_click = null,
+		onchange,
+		onclear,
+		ondrag,
+		onupload,
+		onerror,
+		ondelete,
+		onselect
+	}: {
+		value: null | FileData | FileData[];
+		label: string;
+		show_label?: boolean;
+		file_count: "single" | "multiple" | "directory";
+		file_types: string[] | null;
+		selectable?: boolean;
+		root: string;
+		height?: number | undefined;
+		i18n: I18nFormatter;
+		max_file_size: number | null;
+		upload: Client["upload"];
+		stream_handler: Client["stream"];
+		uploading?: boolean;
+		allow_reordering?: boolean;
+		upload_promise?: Promise<(FileData | null)[]> | null;
+		buttons?: (string | CustomButtonType)[] | null;
+		on_custom_button_click?: ((id: number) => void) | null;
+		onchange?: (event_data: FileData[] | FileData | null) => void;
+		onclear?: () => void;
+		ondrag?: (dragging: boolean) => void;
+		onupload?: (event_data: FileData[] | FileData) => void;
+		onerror?: (error: string) => void;
+		ondelete?: (event_data: FileData) => void;
+		onselect?: (event_data: SelectData) => void;
+	} = $props();
 
-	export let label: string;
-	export let show_label = true;
-	export let file_count: "single" | "multiple" | "directory" = "single";
-	export let file_types: string[] | null = null;
-	export let selectable = false;
-	export let root: string;
-	export let height: number | undefined = undefined;
-	export let i18n: I18nFormatter;
-	export let max_file_size: number | null = null;
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let uploading = false;
-	export let allow_reordering = false;
-	export let upload_promise: Promise<(FileData | null)[]> | null = null;
-	export let buttons: (string | CustomButtonType)[] | null = null;
-	export let on_custom_button_click: ((id: number) => void) | null = null;
-
-	async function handle_upload({
-		detail
-	}: CustomEvent<FileData | FileData[]>): Promise<void> {
+	async function handle_upload(detail: FileData | FileData[]): Promise<void> {
 		if (Array.isArray(value)) {
 			value = [...value, ...(Array.isArray(detail) ? detail : [detail])];
 		} else if (value) {
@@ -39,27 +70,17 @@
 			value = detail;
 		}
 		await tick();
-		dispatch("change", value);
-		dispatch("upload", detail);
+		onchange?.(value);
+		onupload?.(value);
 	}
 
 	function handle_clear(): void {
 		value = null;
-		dispatch("change", null);
-		dispatch("clear");
+		onchange?.(null);
+		onclear?.();
 	}
 
-	const dispatch = createEventDispatcher<{
-		change: FileData[] | FileData | null;
-		clear: undefined;
-		drag: boolean;
-		upload: FileData[] | FileData;
-		load: FileData[] | FileData;
-		error: string;
-	}>();
-
-	let dragging = false;
-	$: dispatch("drag", dragging);
+	let dragging = $state(false);
 </script>
 
 {#if show_label && buttons && buttons.length > 0}
@@ -74,14 +95,14 @@
 				<Upload
 					bind:upload_promise
 					icon_upload={true}
-					on:load={handle_upload}
+					onload={handle_upload}
 					filetype={file_types}
 					{file_count}
 					{max_file_size}
 					{root}
 					bind:dragging
 					bind:uploading
-					on:error
+					{onerror}
 					{stream_handler}
 					{upload}
 				/>
@@ -90,8 +111,7 @@
 		<IconButton
 			Icon={Clear}
 			label={i18n("common.clear")}
-			on:click={(event) => {
-				dispatch("clear");
+			onclick={(event) => {
 				event.stopPropagation();
 				handle_clear();
 			}}
@@ -100,25 +120,25 @@
 
 	<FilePreview
 		{i18n}
-		on:select
+		{onselect}
 		{selectable}
 		{value}
 		{height}
-		on:change
-		on:delete
+		{onchange}
+		{ondelete}
 		{allow_reordering}
 	/>
 {:else}
 	<Upload
 		bind:upload_promise
-		on:load={handle_upload}
+		onload={handle_upload}
 		filetype={file_types}
 		{file_count}
 		{max_file_size}
 		{root}
 		bind:dragging
 		bind:uploading
-		on:error
+		{onerror}
 		{stream_handler}
 		{upload}
 		{height}

package/types.ts

@@ -21,6 +21,6 @@ export interface FileEvents {
 	clear: void;
 	select: SelectData | null;
 	change: FileData | FileData[] | null;
-	delete: void;
+	delete: FileData;
 	custom_button_click: { id: number };
 }