@gradio/upload 0.17.2 → 0.17.4

package/CHANGELOG.md

@@ -1,4 +1,41 @@
 # @gradio/upload
+
+## 0.17.4
+
+### 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!
+- [#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!
+- [#12637](https://github.com/gradio-app/gradio/pull/12637) [`e202750`](https://github.com/gradio-app/gradio/commit/e202750b1deb5d4583c07d7d9d1b86f6b3dfef4b) - Fix bug where UploadProgress initializes with a null upload_id.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/atoms@0.20.1
+- @gradio/utils@0.11.2
+- @gradio/icons@0.15.1
+- @gradio/client@2.0.3
+
+## 0.17.3
+
+### Dependency updates
+
+- @gradio/utils@0.11.1
+- @gradio/client@2.0.2
+
+## 0.17.3
+
+### Dependency updates
+
+- @gradio/atoms@0.20.0
+- @gradio/utils@0.11.0
+- @gradio/client@2.0.1
+
+## 0.17.2
+
+### Dependency updates
+
+- @gradio/utils@0.10.4
+
 ## 0.17.2
 
 ### Features

package/dist/src/ModifyUpload.svelte

@@ -4,18 +4,25 @@
 	import { Edit, Clear, Undo, Download } from "@gradio/icons";
 	import { DownloadLink } from "@gradio/atoms";
 
-	import { createEventDispatcher } from "svelte";
-
-	export let editable = false;
-	export let undoable = false;
-	export let download: string | null = null;
-	export let i18n: I18nFormatter;
-
-	const dispatch = createEventDispatcher<{
-		edit?: never;
-		clear?: never;
-		undo?: never;
-	}>();
+	let {
+		editable = false,
+		undoable = false,
+		download = null,
+		i18n,
+		onedit,
+		onclear,
+		onundo,
+		children
+	}: {
+		editable?: boolean;
+		undoable?: boolean;
+		download?: string | null;
+		i18n: I18nFormatter;
+		onedit?: () => void;
+		onclear?: () => void;
+		onundo?: () => void;
+		children?: import("svelte").Snippet;
+	} = $props();
 </script>
 
 <IconButtonWrapper>
@@ -23,7 +30,7 @@
 		<IconButton
 			Icon={Edit}
 			label={i18n("common.edit")}
-			on:click={() => dispatch("edit")}
+			onclick={() => onedit?.()}
 		/>
 	{/if}
 
@@ -31,7 +38,7 @@
 		<IconButton
 			Icon={Undo}
 			label={i18n("common.undo")}
-			on:click={() => dispatch("undo")}
+			onclick={() => onundo?.()}
 		/>
 	{/if}
 
@@ -41,13 +48,13 @@
 		</DownloadLink>
 	{/if}
 
-	<slot />
+	{#if children}{@render children()}{/if}
 
 	<IconButton
 		Icon={Clear}
 		label={i18n("common.clear")}
-		on:click={(event) => {
-			dispatch("clear");
+		onclick={(event) => {
+			onclear?.();
 			event.stopPropagation();
 		}}
 	/>

package/dist/src/ModifyUpload.svelte.d.ts

@@ -1,37 +1,14 @@
 import type { I18nFormatter } 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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ModifyUpload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+type $$ComponentProps = {
     editable?: boolean;
     undoable?: boolean;
     download?: string | null;
     i18n: I18nFormatter;
-}, {
-    default: {};
-}>, {
-    edit?: CustomEvent<undefined> | undefined;
-    clear?: CustomEvent<undefined> | undefined;
-    undo?: CustomEvent<undefined> | undefined;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ModifyUpload = InstanceType<typeof ModifyUpload>;
+    onedit?: () => void;
+    onclear?: () => void;
+    onundo?: () => void;
+    children?: import("svelte").Snippet;
+};
+declare const ModifyUpload: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModifyUpload = ReturnType<typeof ModifyUpload>;
 export default ModifyUpload;

package/dist/src/Upload.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, tick, getContext } from "svelte";
+	import { tick } from "svelte";
 	import type { FileData } from "@gradio/client";
 	import { prepare_files, type Client } from "@gradio/client";
 	import UploadProgress from "./UploadProgress.svelte";
@@ -7,32 +7,61 @@
 
 	const { drag, open_file_upload: _open_file_upload } = create_drag();
 
-	export let filetype: string | string[] | null = null;
-	export let dragging = false;
-	export let boundedheight = true;
-	export let center = true;
-	export let flex = true;
-	export let file_count: "single" | "multiple" | "directory" = "single";
-	export let disable_click = false;
-	export let root: string;
-	export let hidden = false;
-	export let format: "blob" | "file" = "file";
-	export let uploading = false;
-	export let show_progress = true;
-	export let max_file_size: number | null = null;
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let icon_upload = false;
-	export let height: number | string | undefined = undefined;
-	export let aria_label: string | undefined = undefined;
-	export let upload_promise: Promise<(FileData | null)[]> | null = null;
+	let {
+		filetype = null,
+		dragging = $bindable(false),
+		boundedheight = true,
+		center = true,
+		flex = true,
+		file_count = "single",
+		disable_click = false,
+		root,
+		hidden = false,
+		format = "file",
+		uploading = $bindable(false),
+		show_progress = true,
+		max_file_size = null,
+		upload,
+		stream_handler,
+		icon_upload = false,
+		height = undefined,
+		aria_label = undefined,
+		upload_promise = $bindable(),
+		onload,
+		onerror,
+		children
+	}: {
+		filetype?: string | string[] | null;
+		dragging?: boolean;
+		boundedheight?: boolean;
+		center?: boolean;
+		flex?: boolean;
+		file_count?: "single" | "multiple" | "directory";
+		disable_click?: boolean;
+		root: string;
+		hidden?: boolean;
+		format?: "blob" | "file";
+		uploading?: boolean;
+		show_progress?: boolean;
+		max_file_size?: number | null;
+		upload: Client["upload"];
+		stream_handler: Client["stream"];
+		icon_upload?: boolean;
+		height?: number | string | undefined;
+		aria_label?: string | undefined;
+		upload_promise?: Promise<(FileData | null)[]>;
+		onload?: (data: FileData | FileData[] | Blob | File) => void;
+		onerror?: (error: string) => void;
+		children?: import("svelte").Snippet;
+	} = $props();
 
 	export function open_upload(): void {
 		_open_file_upload();
 	}
+
 	let upload_id: string = "";
 	let file_data: FileData[];
-	let accept_file_types: string | null;
+	let accept_file_types: string | null = $state(null);
 	let use_post_upload_validation: boolean | null = null;
 
 	const get_ios = (): boolean => {
@@ -43,9 +72,8 @@
 		return false;
 	};
 
-	$: ios = get_ios();
+	let ios = get_ios();
 
-	const dispatch = createEventDispatcher();
 	const validFileTypes = ["image", "video", "audio", "text", "file"];
 	const process_file_type = (type: string): string => {
 		if (ios && type.startsWith(".")) {
@@ -64,16 +92,18 @@
 		return "." + type;
 	};
 
-	$: if (filetype == null) {
-		accept_file_types = null;
-	} else if (typeof filetype === "string") {
-		accept_file_types = process_file_type(filetype);
-	} else if (ios && filetype.includes("file/*")) {
-		accept_file_types = "*";
-	} else {
-		filetype = filetype.map(process_file_type);
-		accept_file_types = filetype.join(", ");
-	}
+	$effect(() => {
+		if (filetype == null) {
+			accept_file_types = null;
+		} else if (typeof filetype === "string") {
+			accept_file_types = process_file_type(filetype);
+		} else if (ios && filetype.includes("file/*")) {
+			accept_file_types = "*";
+		} else {
+			const processed = filetype.map(process_file_type);
+			accept_file_types = processed.join(", ");
+		}
+	});
 
 	export function paste_clipboard(): void {
 		navigator.clipboard.read().then(async (items) => {
@@ -97,20 +127,19 @@
 		_open_file_upload();
 	}
 
-	function handle_upload(
+	async function handle_upload(
 		file_data: FileData[],
 		_upload_id?: string
 	): Promise<(FileData | null)[]> {
-		upload_promise = new Promise(async (resolve, rej) => {
-			await tick();
-			if (!_upload_id) {
-				upload_id = Math.random().toString(36).substring(2, 15);
-			} else {
-				upload_id = _upload_id;
-			}
-
-			uploading = true;
+		if (!_upload_id) {
+			upload_id = Math.random().toString(36).substring(2, 15);
+		} else {
+			upload_id = _upload_id;
+		}
 
+		await tick();
+		uploading = true;
+		upload_promise = new Promise(async (resolve) => {
 			try {
 				const _file_data = await upload(
 					file_data,
@@ -118,15 +147,11 @@
 					upload_id,
 					max_file_size ?? Infinity
 				);
-				dispatch(
-					"load",
-					file_count === "single" ? _file_data?.[0] : _file_data
-				);
+				onload?.(file_count === "single" ? _file_data?.[0] : _file_data);
 				resolve(_file_data || []);
 				uploading = false;
-				return _file_data || [];
 			} catch (e) {
-				dispatch("error", (e as Error).message);
+				onerror?.((e as Error).message);
 				uploading = false;
 				resolve([]);
 			}
@@ -186,10 +211,7 @@
 				if (is_valid_file(file)) {
 					return true;
 				}
-				dispatch(
-					"error",
-					`Invalid file type: ${file.name}. Only ${filetype} allowed.`
-				);
+				onerror?.(`Invalid file type: ${file.name}. Only ${filetype} allowed.`);
 				return false;
 			});
 
@@ -243,17 +265,17 @@
 			) {
 				return true;
 			}
-			dispatch("error", `Invalid file type only ${filetype} allowed.`);
+			onerror?.(`Invalid file type only ${filetype} allowed.`);
 			return false;
 		});
 		if (format != "blob") {
 			await load_files(files_to_load);
 		} else {
 			if (file_count === "single") {
-				dispatch("load", files_to_load[0]);
+				onload?.(files_to_load[0]);
 				return;
 			}
-			dispatch("load", files_to_load);
+			onload?.(files_to_load);
 		}
 	}
 
@@ -268,10 +290,10 @@
 			await load_files(files_to_load);
 		} else {
 			if (file_count === "single") {
-				dispatch("load", files_to_load[0]);
+				onload?.(files_to_load[0]);
 				return;
 			}
-			dispatch("load", files_to_load);
+			onload?.(files_to_load);
 		}
 	}
 </script>
@@ -291,10 +313,10 @@
 					: height
 				: "100%"}
 		tabindex={hidden ? -1 : 0}
-		on:click={paste_clipboard}
+		onclick={paste_clipboard}
 		aria-label={aria_label || "Paste from clipboard"}
 	>
-		<slot />
+		{#if children}{@render children()}{/if}
 	</button>
 {:else if uploading && show_progress}
 	{#if !hidden}
@@ -317,7 +339,7 @@
 				: "100%"}
 		tabindex={hidden ? -1 : 0}
 		use:drag={{
-			on_drag_change: (dragging) => (dragging = dragging),
+			on_drag_change: (d) => (dragging = d),
 			on_files: (files) => load_files_from_upload(files),
 			accepted_types: accept_file_types,
 			mode: file_count,
@@ -326,7 +348,7 @@
 		aria-label={aria_label || "Click to upload or drop files"}
 		aria-dropeffect="copy"
 	>
-		<slot />
+		{#if children}{@render children()}{/if}
 	</button>
 {/if}
 

package/dist/src/Upload.svelte.d.ts

@@ -1,24 +1,6 @@
 import type { FileData } from "@gradio/client";
 import { type Client } 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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Upload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+type $$ComponentProps = {
     filetype?: string | string[] | null;
     dragging?: boolean;
     boundedheight?: boolean;
@@ -37,27 +19,17 @@ declare const Upload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     icon_upload?: boolean;
     height?: number | string | undefined;
     aria_label?: string | undefined;
-    upload_promise?: Promise<(FileData | null)[]> | null;
-    open_upload?: () => void;
-    paste_clipboard?: () => void;
-    open_file_upload?: () => void;
-    load_files?: (files: File[] | Blob[], upload_id?: string) => Promise<(FileData | null)[] | void>;
-    load_files_from_drop?: (e: DragEvent) => Promise<void>;
-}, {
-    default: {};
-}>, {
-    load: CustomEvent<any>;
-    error: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
+    upload_promise?: Promise<(FileData | null)[]>;
+    onload?: (data: FileData | FileData[] | Blob | File) => void;
+    onerror?: (error: string) => void;
+    children?: import("svelte").Snippet;
+};
+declare const Upload: import("svelte").Component<$$ComponentProps, {
     open_upload: () => void;
     paste_clipboard: () => void;
     open_file_upload: () => void;
     load_files: (files: File[] | Blob[], upload_id?: string) => Promise<(FileData | null)[] | void>;
     load_files_from_drop: (e: DragEvent) => Promise<void>;
-}, string>;
-type Upload = InstanceType<typeof Upload>;
+}, "uploading" | "dragging" | "upload_promise">;
+type Upload = ReturnType<typeof Upload>;
 export default Upload;

package/dist/src/UploadProgress.svelte

@@ -1,27 +1,36 @@
 <script lang="ts">
 	import { FileData, type Client } from "@gradio/client";
-	import { onMount, createEventDispatcher, onDestroy } from "svelte";
+	import { onMount, onDestroy } from "svelte";
 
 	type FileDataWithProgress = FileData & { progress: number };
 
-	export let upload_id: string;
-	export let root: string;
-	export let files: FileData[];
-	export let stream_handler: Client["stream"];
+	let {
+		upload_id,
+		root,
+		files,
+		stream_handler,
+		ondone
+	}: {
+		upload_id: string;
+		root: string;
+		files: FileData[];
+		stream_handler: Client["stream"];
+		ondone?: () => void;
+	} = $props();
 
 	let stream: Awaited<ReturnType<Client["stream"]>>;
-	let progress = false;
-	let current_file_upload: FileDataWithProgress;
-	let file_to_display: FileDataWithProgress;
-
-	let files_with_progress: FileDataWithProgress[] = files.map((file) => {
-		return {
-			...file,
-			progress: 0
-		};
-	});
-
-	const dispatch = createEventDispatcher();
+	let progress = $state(false);
+	let current_file_upload = $state<FileDataWithProgress>();
+	let file_to_display = $derived(current_file_upload || files_with_progress[0]);
+
+	let files_with_progress = $state<FileDataWithProgress[]>(
+		files.map((file) => {
+			return {
+				...file,
+				progress: 0
+			};
+		})
+	);
 
 	function handleProgress(filename: string, chunk_size: number): void {
 		// Find the corresponding file in the array and update its progress
@@ -52,22 +61,23 @@
 			if (_data.msg === "done") {
 				// the stream will close itself but is here for clarity; remove .close() in 5.0
 				stream?.close();
-				dispatch("done");
+				ondone?.();
 			} else {
 				current_file_upload = _data;
 				handleProgress(_data.orig_name, _data.chunk_size);
 			}
 		};
 	});
+
 	onDestroy(() => {
 		// the stream will close itself but is here for clarity; remove .close() in 5.0
 		if (stream != null || stream != undefined) stream.close();
 	});
 
-	function calculateTotalProgress(files: FileData[]): number {
+	function calculateTotalProgress(files: FileDataWithProgress[]): number {
 		let totalProgress = 0;
 		files.forEach((file) => {
-			totalProgress += getProgress(file as FileDataWithProgress);
+			totalProgress += getProgress(file);
 		});
 
 		document.documentElement.style.setProperty(
@@ -78,9 +88,9 @@
 		return totalProgress / files.length;
 	}
 
-	$: calculateTotalProgress(files_with_progress);
-
-	$: file_to_display = current_file_upload || files_with_progress[0];
+	$effect(() => {
+		calculateTotalProgress(files_with_progress);
+	});
 </script>
 
 <div class="wrap" class:progress>

package/dist/src/UploadProgress.svelte.d.ts

@@ -1,26 +1,11 @@
 import { FileData, type Client } 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 UploadProgress: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     upload_id: string;
     root: string;
     files: FileData[];
     stream_handler: Client["stream"];
-}, {
-    done: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type UploadProgress = InstanceType<typeof UploadProgress>;
+    ondone?: () => void;
+};
+declare const UploadProgress: import("svelte").Component<$$ComponentProps, {}, "">;
+type UploadProgress = ReturnType<typeof UploadProgress>;
 export default UploadProgress;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@gradio/upload",
-  "version": "0.17.2",
+  "version": "0.17.4",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "src/index.ts",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@gradio/atoms": "^0.19.0",
-    "@gradio/icons": "^0.15.0",
-    "@gradio/client": "^2.0.0",
-    "@gradio/utils": "^0.10.3"
+    "@gradio/atoms": "^0.20.1",
+    "@gradio/icons": "^0.15.1",
+    "@gradio/utils": "^0.11.2",
+    "@gradio/client": "^2.0.3"
   },
   "main_changeset": true,
   "exports": {
@@ -21,7 +21,7 @@
     }
   },
   "peerDependencies": {
-    "svelte": "^5.43.4"
+    "svelte": "^5.48.0"
   },
   "repository": {
     "type": "git",

package/src/ModifyUpload.svelte

@@ -4,18 +4,25 @@
 	import { Edit, Clear, Undo, Download } from "@gradio/icons";
 	import { DownloadLink } from "@gradio/atoms";
 
-	import { createEventDispatcher } from "svelte";
-
-	export let editable = false;
-	export let undoable = false;
-	export let download: string | null = null;
-	export let i18n: I18nFormatter;
-
-	const dispatch = createEventDispatcher<{
-		edit?: never;
-		clear?: never;
-		undo?: never;
-	}>();
+	let {
+		editable = false,
+		undoable = false,
+		download = null,
+		i18n,
+		onedit,
+		onclear,
+		onundo,
+		children
+	}: {
+		editable?: boolean;
+		undoable?: boolean;
+		download?: string | null;
+		i18n: I18nFormatter;
+		onedit?: () => void;
+		onclear?: () => void;
+		onundo?: () => void;
+		children?: import("svelte").Snippet;
+	} = $props();
 </script>
 
 <IconButtonWrapper>
@@ -23,7 +30,7 @@
 		<IconButton
 			Icon={Edit}
 			label={i18n("common.edit")}
-			on:click={() => dispatch("edit")}
+			onclick={() => onedit?.()}
 		/>
 	{/if}
 
@@ -31,7 +38,7 @@
 		<IconButton
 			Icon={Undo}
 			label={i18n("common.undo")}
-			on:click={() => dispatch("undo")}
+			onclick={() => onundo?.()}
 		/>
 	{/if}
 
@@ -41,13 +48,13 @@
 		</DownloadLink>
 	{/if}
 
-	<slot />
+	{#if children}{@render children()}{/if}
 
 	<IconButton
 		Icon={Clear}
 		label={i18n("common.clear")}
-		on:click={(event) => {
-			dispatch("clear");
+		onclick={(event) => {
+			onclear?.();
 			event.stopPropagation();
 		}}
 	/>

package/src/Upload.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, tick, getContext } from "svelte";
+	import { tick } from "svelte";
 	import type { FileData } from "@gradio/client";
 	import { prepare_files, type Client } from "@gradio/client";
 	import UploadProgress from "./UploadProgress.svelte";
@@ -7,32 +7,61 @@
 
 	const { drag, open_file_upload: _open_file_upload } = create_drag();
 
-	export let filetype: string | string[] | null = null;
-	export let dragging = false;
-	export let boundedheight = true;
-	export let center = true;
-	export let flex = true;
-	export let file_count: "single" | "multiple" | "directory" = "single";
-	export let disable_click = false;
-	export let root: string;
-	export let hidden = false;
-	export let format: "blob" | "file" = "file";
-	export let uploading = false;
-	export let show_progress = true;
-	export let max_file_size: number | null = null;
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let icon_upload = false;
-	export let height: number | string | undefined = undefined;
-	export let aria_label: string | undefined = undefined;
-	export let upload_promise: Promise<(FileData | null)[]> | null = null;
+	let {
+		filetype = null,
+		dragging = $bindable(false),
+		boundedheight = true,
+		center = true,
+		flex = true,
+		file_count = "single",
+		disable_click = false,
+		root,
+		hidden = false,
+		format = "file",
+		uploading = $bindable(false),
+		show_progress = true,
+		max_file_size = null,
+		upload,
+		stream_handler,
+		icon_upload = false,
+		height = undefined,
+		aria_label = undefined,
+		upload_promise = $bindable(),
+		onload,
+		onerror,
+		children
+	}: {
+		filetype?: string | string[] | null;
+		dragging?: boolean;
+		boundedheight?: boolean;
+		center?: boolean;
+		flex?: boolean;
+		file_count?: "single" | "multiple" | "directory";
+		disable_click?: boolean;
+		root: string;
+		hidden?: boolean;
+		format?: "blob" | "file";
+		uploading?: boolean;
+		show_progress?: boolean;
+		max_file_size?: number | null;
+		upload: Client["upload"];
+		stream_handler: Client["stream"];
+		icon_upload?: boolean;
+		height?: number | string | undefined;
+		aria_label?: string | undefined;
+		upload_promise?: Promise<(FileData | null)[]>;
+		onload?: (data: FileData | FileData[] | Blob | File) => void;
+		onerror?: (error: string) => void;
+		children?: import("svelte").Snippet;
+	} = $props();
 
 	export function open_upload(): void {
 		_open_file_upload();
 	}
+
 	let upload_id: string = "";
 	let file_data: FileData[];
-	let accept_file_types: string | null;
+	let accept_file_types: string | null = $state(null);
 	let use_post_upload_validation: boolean | null = null;
 
 	const get_ios = (): boolean => {
@@ -43,9 +72,8 @@
 		return false;
 	};
 
-	$: ios = get_ios();
+	let ios = get_ios();
 
-	const dispatch = createEventDispatcher();
 	const validFileTypes = ["image", "video", "audio", "text", "file"];
 	const process_file_type = (type: string): string => {
 		if (ios && type.startsWith(".")) {
@@ -64,16 +92,18 @@
 		return "." + type;
 	};
 
-	$: if (filetype == null) {
-		accept_file_types = null;
-	} else if (typeof filetype === "string") {
-		accept_file_types = process_file_type(filetype);
-	} else if (ios && filetype.includes("file/*")) {
-		accept_file_types = "*";
-	} else {
-		filetype = filetype.map(process_file_type);
-		accept_file_types = filetype.join(", ");
-	}
+	$effect(() => {
+		if (filetype == null) {
+			accept_file_types = null;
+		} else if (typeof filetype === "string") {
+			accept_file_types = process_file_type(filetype);
+		} else if (ios && filetype.includes("file/*")) {
+			accept_file_types = "*";
+		} else {
+			const processed = filetype.map(process_file_type);
+			accept_file_types = processed.join(", ");
+		}
+	});
 
 	export function paste_clipboard(): void {
 		navigator.clipboard.read().then(async (items) => {
@@ -97,20 +127,19 @@
 		_open_file_upload();
 	}
 
-	function handle_upload(
+	async function handle_upload(
 		file_data: FileData[],
 		_upload_id?: string
 	): Promise<(FileData | null)[]> {
-		upload_promise = new Promise(async (resolve, rej) => {
-			await tick();
-			if (!_upload_id) {
-				upload_id = Math.random().toString(36).substring(2, 15);
-			} else {
-				upload_id = _upload_id;
-			}
-
-			uploading = true;
+		if (!_upload_id) {
+			upload_id = Math.random().toString(36).substring(2, 15);
+		} else {
+			upload_id = _upload_id;
+		}
 
+		await tick();
+		uploading = true;
+		upload_promise = new Promise(async (resolve) => {
 			try {
 				const _file_data = await upload(
 					file_data,
@@ -118,15 +147,11 @@
 					upload_id,
 					max_file_size ?? Infinity
 				);
-				dispatch(
-					"load",
-					file_count === "single" ? _file_data?.[0] : _file_data
-				);
+				onload?.(file_count === "single" ? _file_data?.[0] : _file_data);
 				resolve(_file_data || []);
 				uploading = false;
-				return _file_data || [];
 			} catch (e) {
-				dispatch("error", (e as Error).message);
+				onerror?.((e as Error).message);
 				uploading = false;
 				resolve([]);
 			}
@@ -186,10 +211,7 @@
 				if (is_valid_file(file)) {
 					return true;
 				}
-				dispatch(
-					"error",
-					`Invalid file type: ${file.name}. Only ${filetype} allowed.`
-				);
+				onerror?.(`Invalid file type: ${file.name}. Only ${filetype} allowed.`);
 				return false;
 			});
 
@@ -243,17 +265,17 @@
 			) {
 				return true;
 			}
-			dispatch("error", `Invalid file type only ${filetype} allowed.`);
+			onerror?.(`Invalid file type only ${filetype} allowed.`);
 			return false;
 		});
 		if (format != "blob") {
 			await load_files(files_to_load);
 		} else {
 			if (file_count === "single") {
-				dispatch("load", files_to_load[0]);
+				onload?.(files_to_load[0]);
 				return;
 			}
-			dispatch("load", files_to_load);
+			onload?.(files_to_load);
 		}
 	}
 
@@ -268,10 +290,10 @@
 			await load_files(files_to_load);
 		} else {
 			if (file_count === "single") {
-				dispatch("load", files_to_load[0]);
+				onload?.(files_to_load[0]);
 				return;
 			}
-			dispatch("load", files_to_load);
+			onload?.(files_to_load);
 		}
 	}
 </script>
@@ -291,10 +313,10 @@
 					: height
 				: "100%"}
 		tabindex={hidden ? -1 : 0}
-		on:click={paste_clipboard}
+		onclick={paste_clipboard}
 		aria-label={aria_label || "Paste from clipboard"}
 	>
-		<slot />
+		{#if children}{@render children()}{/if}
 	</button>
 {:else if uploading && show_progress}
 	{#if !hidden}
@@ -317,7 +339,7 @@
 				: "100%"}
 		tabindex={hidden ? -1 : 0}
 		use:drag={{
-			on_drag_change: (dragging) => (dragging = dragging),
+			on_drag_change: (d) => (dragging = d),
 			on_files: (files) => load_files_from_upload(files),
 			accepted_types: accept_file_types,
 			mode: file_count,
@@ -326,7 +348,7 @@
 		aria-label={aria_label || "Click to upload or drop files"}
 		aria-dropeffect="copy"
 	>
-		<slot />
+		{#if children}{@render children()}{/if}
 	</button>
 {/if}
 

package/src/UploadProgress.svelte

@@ -1,27 +1,36 @@
 <script lang="ts">
 	import { FileData, type Client } from "@gradio/client";
-	import { onMount, createEventDispatcher, onDestroy } from "svelte";
+	import { onMount, onDestroy } from "svelte";
 
 	type FileDataWithProgress = FileData & { progress: number };
 
-	export let upload_id: string;
-	export let root: string;
-	export let files: FileData[];
-	export let stream_handler: Client["stream"];
+	let {
+		upload_id,
+		root,
+		files,
+		stream_handler,
+		ondone
+	}: {
+		upload_id: string;
+		root: string;
+		files: FileData[];
+		stream_handler: Client["stream"];
+		ondone?: () => void;
+	} = $props();
 
 	let stream: Awaited<ReturnType<Client["stream"]>>;
-	let progress = false;
-	let current_file_upload: FileDataWithProgress;
-	let file_to_display: FileDataWithProgress;
-
-	let files_with_progress: FileDataWithProgress[] = files.map((file) => {
-		return {
-			...file,
-			progress: 0
-		};
-	});
-
-	const dispatch = createEventDispatcher();
+	let progress = $state(false);
+	let current_file_upload = $state<FileDataWithProgress>();
+	let file_to_display = $derived(current_file_upload || files_with_progress[0]);
+
+	let files_with_progress = $state<FileDataWithProgress[]>(
+		files.map((file) => {
+			return {
+				...file,
+				progress: 0
+			};
+		})
+	);
 
 	function handleProgress(filename: string, chunk_size: number): void {
 		// Find the corresponding file in the array and update its progress
@@ -52,22 +61,23 @@
 			if (_data.msg === "done") {
 				// the stream will close itself but is here for clarity; remove .close() in 5.0
 				stream?.close();
-				dispatch("done");
+				ondone?.();
 			} else {
 				current_file_upload = _data;
 				handleProgress(_data.orig_name, _data.chunk_size);
 			}
 		};
 	});
+
 	onDestroy(() => {
 		// the stream will close itself but is here for clarity; remove .close() in 5.0
 		if (stream != null || stream != undefined) stream.close();
 	});
 
-	function calculateTotalProgress(files: FileData[]): number {
+	function calculateTotalProgress(files: FileDataWithProgress[]): number {
 		let totalProgress = 0;
 		files.forEach((file) => {
-			totalProgress += getProgress(file as FileDataWithProgress);
+			totalProgress += getProgress(file);
 		});
 
 		document.documentElement.style.setProperty(
@@ -78,9 +88,9 @@
 		return totalProgress / files.length;
 	}
 
-	$: calculateTotalProgress(files_with_progress);
-
-	$: file_to_display = current_file_upload || files_with_progress[0];
+	$effect(() => {
+		calculateTotalProgress(files_with_progress);
+	});
 </script>
 
 <div class="wrap" class:progress>