@gradio/upload 0.17.2-dev.0 → 0.17.2-dev.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @gradio/upload
 
+## 0.17.2-dev.2
+
+### Dependency updates
+
+- @gradio/atoms@0.19.0-dev.1
+- @gradio/client@2.0.0-dev.2
+
+## 0.17.2-dev.1
+
+### Dependency updates
+
+- @gradio/atoms@0.18.2-dev.0
+- @gradio/utils@0.10.3-dev.0
+- @gradio/icons@0.15.0-dev.0
+
+## 0.17.2-dev.0
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.1
+
 ## 0.17.2-dev.0
 
 ### Dependency updates

package/dist/src/ModifyUpload.svelte

@@ -1,12 +1,21 @@
-<script>import { IconButton, IconButtonWrapper } from "@gradio/atoms";
-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 = null;
-export let i18n;
-const dispatch = createEventDispatcher();
+<script lang="ts">
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
+	import type { I18nFormatter } from "@gradio/utils";
+	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;
+	}>();
 </script>
 
 <IconButtonWrapper>

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

@@ -1,28 +1,37 @@
-import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        editable?: boolean;
-        undoable?: boolean;
-        download?: string | null;
-        i18n: I18nFormatter;
+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;
     };
-    events: {
-        edit?: CustomEvent<undefined> | undefined;
-        clear?: CustomEvent<undefined> | undefined;
-        undo?: CustomEvent<undefined> | undefined;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ModifyUploadProps = typeof __propDef.props;
-export type ModifyUploadEvents = typeof __propDef.events;
-export type ModifyUploadSlots = typeof __propDef.slots;
-export default class ModifyUpload extends SvelteComponent<ModifyUploadProps, ModifyUploadEvents, ModifyUploadSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+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<{
+    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>;
+export default ModifyUpload;

package/dist/src/Upload.svelte

@@ -1,209 +1,279 @@
-<script>import { createEventDispatcher, tick, getContext } from "svelte";
-import { prepare_files } from "@gradio/client";
-import UploadProgress from "./UploadProgress.svelte";
-import { create_drag } from "./utils";
-const { drag, open_file_upload: _open_file_upload } = create_drag();
-export let filetype = null;
-export let dragging = false;
-export let boundedheight = true;
-export let center = true;
-export let flex = true;
-export let file_count = "single";
-export let disable_click = false;
-export let root;
-export let hidden = false;
-export let format = "file";
-export let uploading = false;
-export let show_progress = true;
-export let max_file_size = null;
-export let upload;
-export let stream_handler;
-export let icon_upload = false;
-export let height = void 0;
-export let aria_label = void 0;
-export function open_upload() {
-  _open_file_upload();
-}
-let upload_id;
-let file_data;
-let accept_file_types;
-let use_post_upload_validation = null;
-const get_ios = () => {
-  if (typeof navigator !== "undefined") {
-    const userAgent = navigator.userAgent.toLowerCase();
-    return userAgent.indexOf("iphone") > -1 || userAgent.indexOf("ipad") > -1;
-  }
-  return false;
-};
-$: ios = get_ios();
-const dispatch = createEventDispatcher();
-const validFileTypes = ["image", "video", "audio", "text", "file"];
-const process_file_type = (type) => {
-  if (ios && type.startsWith(".")) {
-    use_post_upload_validation = true;
-    return type;
-  }
-  if (ios && type.includes("file/*")) {
-    return "*";
-  }
-  if (type.startsWith(".") || type.endsWith("/*")) {
-    return type;
-  }
-  if (validFileTypes.includes(type)) {
-    return type + "/*";
-  }
-  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(", ");
-}
-export function paste_clipboard() {
-  navigator.clipboard.read().then(async (items) => {
-    for (let i = 0; i < items.length; i++) {
-      const type = items[i].types.find((t) => t.startsWith("image/"));
-      if (type) {
-        items[i].getType(type).then(async (blob) => {
-          const file = new File(
-            [blob],
-            `clipboard.${type.replace("image/", "")}`
-          );
-          await load_files([file]);
-        });
-        break;
-      }
-    }
-  });
-}
-export function open_file_upload() {
-  _open_file_upload();
-}
-async function handle_upload(file_data2, upload_id2) {
-  await tick();
-  if (!upload_id2) {
-    upload_id2 = Math.random().toString(36).substring(2, 15);
-  }
-  uploading = true;
-  try {
-    const _file_data = await upload(
-      file_data2,
-      root,
-      upload_id2,
-      max_file_size ?? Infinity
-    );
-    dispatch("load", file_count === "single" ? _file_data?.[0] : _file_data);
-    uploading = false;
-    return _file_data || [];
-  } catch (e) {
-    dispatch("error", e.message);
-    uploading = false;
-    return [];
-  }
-}
-function is_valid_mimetype(file_accept, uploaded_file_extension, uploaded_file_type) {
-  if (!file_accept || file_accept === "*" || file_accept === "file/*" || Array.isArray(file_accept) && file_accept.some((accept) => accept === "*" || accept === "file/*")) {
-    return true;
-  }
-  let acceptArray;
-  if (typeof file_accept === "string") {
-    acceptArray = file_accept.split(",").map((s) => s.trim());
-  } else if (Array.isArray(file_accept)) {
-    acceptArray = file_accept;
-  } else {
-    return false;
-  }
-  return acceptArray.includes(uploaded_file_extension) || acceptArray.some((type) => {
-    const [category] = type.split("/").map((s) => s.trim());
-    return type.endsWith("/*") && uploaded_file_type.startsWith(category + "/");
-  });
-}
-export async function load_files(files, upload_id2) {
-  if (!files.length) {
-    return;
-  }
-  let _files = files.map(
-    (f) => new File([f], f instanceof File ? f.name : "file", { type: f.type })
-  );
-  if (ios && use_post_upload_validation) {
-    _files = _files.filter((file) => {
-      if (is_valid_file(file)) {
-        return true;
-      }
-      dispatch(
-        "error",
-        `Invalid file type: ${file.name}. Only ${filetype} allowed.`
-      );
-      return false;
-    });
-    if (_files.length === 0) {
-      return [];
-    }
-  }
-  file_data = await prepare_files(_files);
-  return await handle_upload(file_data, upload_id2);
-}
-function is_valid_file(file) {
-  if (!filetype) return true;
-  const allowed_types = Array.isArray(filetype) ? filetype : [filetype];
-  return allowed_types.some((type) => {
-    const processed_type = process_file_type(type);
-    if (processed_type.startsWith(".")) {
-      return file.name.toLowerCase().endsWith(processed_type.toLowerCase());
-    }
-    if (processed_type === "*") {
-      return true;
-    }
-    if (processed_type.endsWith("/*")) {
-      const [category] = processed_type.split("/");
-      return file.type.startsWith(category + "/");
-    }
-    return file.type === processed_type;
-  });
-}
-async function load_files_from_upload(files) {
-  const files_to_load = files.filter((file) => {
-    const file_extension = "." + file.name.toLowerCase().split(".").pop();
-    if (file_extension && is_valid_mimetype(accept_file_types, file_extension, file.type)) {
-      return true;
-    }
-    if (file_extension && Array.isArray(filetype) ? filetype.includes(file_extension) : file_extension === filetype) {
-      return true;
-    }
-    dispatch("error", `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]);
-      return;
-    }
-    dispatch("load", files_to_load);
-  }
-}
-export async function load_files_from_drop(e) {
-  dragging = false;
-  if (!e.dataTransfer?.files) return;
-  const files_to_load = Array.from(e.dataTransfer.files).filter(
-    is_valid_file
-  );
-  if (format != "blob") {
-    await load_files(files_to_load);
-  } else {
-    if (file_count === "single") {
-      dispatch("load", files_to_load[0]);
-      return;
-    }
-    dispatch("load", files_to_load);
-  }
-}
+<script lang="ts">
+	import { createEventDispatcher, tick, getContext } from "svelte";
+	import type { FileData } from "@gradio/client";
+	import { prepare_files, type Client } from "@gradio/client";
+	import UploadProgress from "./UploadProgress.svelte";
+	import { create_drag } from "./utils";
+
+	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;
+
+	export function open_upload(): void {
+		_open_file_upload();
+	}
+	let upload_id: string = "";
+	let file_data: FileData[];
+	let accept_file_types: string | null;
+	let use_post_upload_validation: boolean | null = null;
+
+	const get_ios = (): boolean => {
+		if (typeof navigator !== "undefined") {
+			const userAgent = navigator.userAgent.toLowerCase();
+			return userAgent.indexOf("iphone") > -1 || userAgent.indexOf("ipad") > -1;
+		}
+		return false;
+	};
+
+	$: ios = get_ios();
+
+	const dispatch = createEventDispatcher();
+	const validFileTypes = ["image", "video", "audio", "text", "file"];
+	const process_file_type = (type: string): string => {
+		if (ios && type.startsWith(".")) {
+			use_post_upload_validation = true;
+			return type;
+		}
+		if (ios && type.includes("file/*")) {
+			return "*";
+		}
+		if (type.startsWith(".") || type.endsWith("/*")) {
+			return type;
+		}
+		if (validFileTypes.includes(type)) {
+			return type + "/*";
+		}
+		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(", ");
+	}
+
+	export function paste_clipboard(): void {
+		navigator.clipboard.read().then(async (items) => {
+			for (let i = 0; i < items.length; i++) {
+				const type = items[i].types.find((t) => t.startsWith("image/"));
+				if (type) {
+					items[i].getType(type).then(async (blob) => {
+						const file = new File(
+							[blob],
+							`clipboard.${type.replace("image/", "")}`
+						);
+						await load_files([file]);
+					});
+					break;
+				}
+			}
+		});
+	}
+
+	export function open_file_upload(): void {
+		_open_file_upload();
+	}
+
+	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;
+
+			try {
+				const _file_data = await upload(
+					file_data,
+					root,
+					upload_id,
+					max_file_size ?? Infinity
+				);
+				dispatch(
+					"load",
+					file_count === "single" ? _file_data?.[0] : _file_data
+				);
+				resolve(_file_data || []);
+				uploading = false;
+				return _file_data || [];
+			} catch (e) {
+				dispatch("error", (e as Error).message);
+				uploading = false;
+				resolve([]);
+			}
+		});
+
+		return upload_promise;
+	}
+
+	function is_valid_mimetype(
+		file_accept: string | string[] | null,
+		uploaded_file_extension: string,
+		uploaded_file_type: string
+	): boolean {
+		if (
+			!file_accept ||
+			file_accept === "*" ||
+			file_accept === "file/*" ||
+			(Array.isArray(file_accept) &&
+				file_accept.some((accept) => accept === "*" || accept === "file/*"))
+		) {
+			return true;
+		}
+		let acceptArray: string[];
+		if (typeof file_accept === "string") {
+			acceptArray = file_accept.split(",").map((s) => s.trim());
+		} else if (Array.isArray(file_accept)) {
+			acceptArray = file_accept;
+		} else {
+			return false;
+		}
+
+		return (
+			acceptArray.includes(uploaded_file_extension) ||
+			acceptArray.some((type) => {
+				const [category] = type.split("/").map((s) => s.trim());
+				return (
+					type.endsWith("/*") && uploaded_file_type.startsWith(category + "/")
+				);
+			})
+		);
+	}
+
+	export async function load_files(
+		files: File[] | Blob[],
+		upload_id?: string
+	): Promise<(FileData | null)[] | void> {
+		if (!files.length) {
+			return;
+		}
+		let _files: File[] = files.map(
+			(f) =>
+				new File([f], f instanceof File ? f.name : "file", { type: f.type })
+		);
+
+		if (ios && use_post_upload_validation) {
+			_files = _files.filter((file) => {
+				if (is_valid_file(file)) {
+					return true;
+				}
+				dispatch(
+					"error",
+					`Invalid file type: ${file.name}. Only ${filetype} allowed.`
+				);
+				return false;
+			});
+
+			if (_files.length === 0) {
+				return [];
+			}
+		}
+
+		file_data = await prepare_files(_files);
+		return await handle_upload(file_data, upload_id);
+	}
+
+	function is_valid_file(file: File): boolean {
+		if (!filetype) return true;
+
+		const allowed_types = Array.isArray(filetype) ? filetype : [filetype];
+
+		return allowed_types.some((type) => {
+			const processed_type = process_file_type(type);
+
+			if (processed_type.startsWith(".")) {
+				return file.name.toLowerCase().endsWith(processed_type.toLowerCase());
+			}
+
+			if (processed_type === "*") {
+				return true;
+			}
+
+			if (processed_type.endsWith("/*")) {
+				const [category] = processed_type.split("/");
+				return file.type.startsWith(category + "/");
+			}
+
+			return file.type === processed_type;
+		});
+	}
+
+	async function load_files_from_upload(files: File[]): Promise<void> {
+		const files_to_load = files.filter((file) => {
+			const file_extension = "." + file.name.toLowerCase().split(".").pop();
+			if (
+				file_extension &&
+				is_valid_mimetype(accept_file_types, file_extension, file.type)
+			) {
+				return true;
+			}
+			if (
+				file_extension && Array.isArray(filetype)
+					? filetype.includes(file_extension)
+					: file_extension === filetype
+			) {
+				return true;
+			}
+			dispatch("error", `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]);
+				return;
+			}
+			dispatch("load", files_to_load);
+		}
+	}
+
+	export async function load_files_from_drop(e: DragEvent): Promise<void> {
+		dragging = false;
+		if (!e.dataTransfer?.files) return;
+		const files_to_load = Array.from(e.dataTransfer.files).filter(
+			is_valid_file
+		);
+
+		if (format != "blob") {
+			await load_files(files_to_load);
+		} else {
+			if (file_count === "single") {
+				dispatch("load", files_to_load[0]);
+				return;
+			}
+			dispatch("load", files_to_load);
+		}
+	}
 </script>
 
 {#if filetype === "clipboard"}

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

@@ -1,52 +1,63 @@
-import { SvelteComponent } from "svelte";
 import type { FileData } from "@gradio/client";
 import { type Client } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        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;
-        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>;
+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;
     };
-    events: {
-        load: CustomEvent<any>;
-        error: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type UploadProps = typeof __propDef.props;
-export type UploadEvents = typeof __propDef.events;
-export type UploadSlots = typeof __propDef.slots;
-export default class Upload extends SvelteComponent<UploadProps, UploadEvents, UploadSlots> {
-    get open_upload(): () => void;
-    get paste_clipboard(): () => void;
-    get open_file_upload(): () => void;
-    get load_files(): (files: File[] | Blob[], upload_id?: string) => Promise<(FileData | null)[] | void>;
-    get load_files_from_drop(): (e: DragEvent) => Promise<void>;
+    z_$$bindings?: Bindings;
 }
-export {};
+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<{
+    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)[]> | 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: {};
+}, {
+    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>;
+export default Upload;

package/dist/src/UploadProgress.svelte

@@ -1,66 +1,86 @@
-<script>import { FileData } from "@gradio/client";
-import { onMount, createEventDispatcher, onDestroy } from "svelte";
-export let upload_id;
-export let root;
-export let files;
-export let stream_handler;
-let stream;
-let progress = false;
-let current_file_upload;
-let file_to_display;
-let files_with_progress = files.map((file) => {
-  return {
-    ...file,
-    progress: 0
-  };
-});
-const dispatch = createEventDispatcher();
-function handleProgress(filename, chunk_size) {
-  files_with_progress = files_with_progress.map((file) => {
-    if (file.orig_name === filename) {
-      file.progress += chunk_size;
-    }
-    return file;
-  });
-}
-function getProgress(file) {
-  return file.progress * 100 / (file.size || 0) || 0;
-}
-onMount(async () => {
-  stream = await stream_handler(
-    new URL(`${root}/gradio_api/upload_progress?upload_id=${upload_id}`)
-  );
-  if (stream == null) {
-    throw new Error("Event source is not defined");
-  }
-  stream.onmessage = async function(event) {
-    const _data = JSON.parse(event.data);
-    if (!progress) progress = true;
-    if (_data.msg === "done") {
-      stream?.close();
-      dispatch("done");
-    } else {
-      current_file_upload = _data;
-      handleProgress(_data.orig_name, _data.chunk_size);
-    }
-  };
-});
-onDestroy(() => {
-  if (stream != null || stream != void 0) stream.close();
-});
-function calculateTotalProgress(files2) {
-  let totalProgress = 0;
-  files2.forEach((file) => {
-    totalProgress += getProgress(file);
-  });
-  document.documentElement.style.setProperty(
-    "--upload-progress-width",
-    (totalProgress / files2.length).toFixed(2) + "%"
-  );
-  return totalProgress / files2.length;
-}
-$: calculateTotalProgress(files_with_progress);
-$: file_to_display = current_file_upload || files_with_progress[0];
+<script lang="ts">
+	import { FileData, type Client } from "@gradio/client";
+	import { onMount, createEventDispatcher, 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 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();
+
+	function handleProgress(filename: string, chunk_size: number): void {
+		// Find the corresponding file in the array and update its progress
+		files_with_progress = files_with_progress.map((file) => {
+			if (file.orig_name === filename) {
+				file.progress += chunk_size;
+			}
+			return file;
+		});
+	}
+
+	function getProgress(file: FileDataWithProgress): number {
+		return (file.progress * 100) / (file.size || 0) || 0;
+	}
+
+	onMount(async () => {
+		stream = await stream_handler(
+			new URL(`${root}/gradio_api/upload_progress?upload_id=${upload_id}`)
+		);
+
+		if (stream == null) {
+			throw new Error("Event source is not defined");
+		}
+		// Event listener for progress updates
+		stream.onmessage = async function (event) {
+			const _data = JSON.parse(event.data);
+			if (!progress) progress = true;
+			if (_data.msg === "done") {
+				// the stream will close itself but is here for clarity; remove .close() in 5.0
+				stream?.close();
+				dispatch("done");
+			} 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 {
+		let totalProgress = 0;
+		files.forEach((file) => {
+			totalProgress += getProgress(file as FileDataWithProgress);
+		});
+
+		document.documentElement.style.setProperty(
+			"--upload-progress-width",
+			(totalProgress / files.length).toFixed(2) + "%"
+		);
+
+		return totalProgress / files.length;
+	}
+
+	$: calculateTotalProgress(files_with_progress);
+
+	$: file_to_display = current_file_upload || files_with_progress[0];
 </script>
 
 <div class="wrap" class:progress>
@@ -154,7 +174,8 @@ $: file_to_display = current_file_upload || files_with_progress[0];
 		width: 14px;
 		height: 14px;
 		border-radius: 50%;
-		background: radial-gradient(
+		background:
+			radial-gradient(
 				closest-side,
 				var(--block-background-fill) 64%,
 				transparent 53% 100%

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

@@ -1,24 +1,26 @@
-import { SvelteComponent } from "svelte";
 import { FileData, type Client } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        upload_id: string;
-        root: string;
-        files: FileData[];
-        stream_handler: Client["stream"];
+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;
     };
-    events: {
-        done: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type UploadProgressProps = typeof __propDef.props;
-export type UploadProgressEvents = typeof __propDef.events;
-export type UploadProgressSlots = typeof __propDef.slots;
-export default class UploadProgress extends SvelteComponent<UploadProgressProps, UploadProgressEvents, UploadProgressSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const UploadProgress: $$__sveltets_2_IsomorphicComponent<{
+    upload_id: string;
+    root: string;
+    files: FileData[];
+    stream_handler: Client["stream"];
+}, {
+    done: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type UploadProgress = InstanceType<typeof UploadProgress>;
+export default UploadProgress;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@gradio/upload",
-  "version": "0.17.2-dev.0",
+  "version": "0.17.2-dev.2",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "src/index.ts",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@gradio/atoms": "^0.18.1",
-    "@gradio/icons": "^0.14.0",
-    "@gradio/client": "^2.0.0-dev.0",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/atoms": "^0.19.0-dev.1",
+    "@gradio/client": "^2.0.0-dev.2",
+    "@gradio/icons": "^0.15.0-dev.0",
+    "@gradio/utils": "^0.10.3-dev.0"
   },
   "main_changeset": true,
   "exports": {
@@ -21,7 +21,7 @@
     }
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.43.4"
   },
   "repository": {
     "type": "git",

package/src/Upload.svelte

@@ -25,10 +25,12 @@
 	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;
+
 	export function open_upload(): void {
 		_open_file_upload();
 	}
-	let upload_id: string;
+	let upload_id: string = "";
 	let file_data: FileData[];
 	let accept_file_types: string | null;
 	let use_post_upload_validation: boolean | null = null;
@@ -95,30 +97,42 @@
 		_open_file_upload();
 	}
 
-	async function handle_upload(
+	function handle_upload(
 		file_data: FileData[],
-		upload_id?: string
+		_upload_id?: string
 	): Promise<(FileData | null)[]> {
-		await tick();
-		if (!upload_id) {
-			upload_id = Math.random().toString(36).substring(2, 15);
-		}
-		uploading = true;
-		try {
-			const _file_data = await upload(
-				file_data,
-				root,
-				upload_id,
-				max_file_size ?? Infinity
-			);
-			dispatch("load", file_count === "single" ? _file_data?.[0] : _file_data);
-			uploading = false;
-			return _file_data || [];
-		} catch (e) {
-			dispatch("error", (e as Error).message);
-			uploading = false;
-			return [];
-		}
+		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;
+
+			try {
+				const _file_data = await upload(
+					file_data,
+					root,
+					upload_id,
+					max_file_size ?? Infinity
+				);
+				dispatch(
+					"load",
+					file_count === "single" ? _file_data?.[0] : _file_data
+				);
+				resolve(_file_data || []);
+				uploading = false;
+				return _file_data || [];
+			} catch (e) {
+				dispatch("error", (e as Error).message);
+				uploading = false;
+				resolve([]);
+			}
+		});
+
+		return upload_promise;
 	}
 
 	function is_valid_mimetype(
@@ -232,7 +246,6 @@
 			dispatch("error", `Invalid file type only ${filetype} allowed.`);
 			return false;
 		});
-
 		if (format != "blob") {
 			await load_files(files_to_load);
 		} else {

package/src/UploadProgress.svelte

@@ -174,7 +174,8 @@
 		width: 14px;
 		height: 14px;
 		border-radius: 50%;
-		background: radial-gradient(
+		background:
+			radial-gradient(
 				closest-side,
 				var(--block-background-fill) 64%,
 				transparent 53% 100%