@gradio/uploadbutton 0.9.13-dev.0 → 0.9.13-dev.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @gradio/uploadbutton
 
+## 0.9.13-dev.1
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.2
+- @gradio/button@0.5.14-dev.2
+- @gradio/upload@0.17.2-dev.2
+
+## 0.9.13-dev.1
+
+### Dependency updates
+
+- @gradio/upload@0.17.2-dev.1
+- @gradio/utils@0.10.3-dev.0
+- @gradio/button@0.5.14-dev.1
+
+## 0.9.13-dev.0
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.1
+
 ## 0.9.13-dev.0
 
 ### Dependency updates

package/Index.svelte

@@ -3,65 +3,56 @@
 </script>
 
 <script lang="ts">
-	import type { Gradio } from "@gradio/utils";
+	import type { UploadButtonProps, UploadButtonEvents } from "./types";
 	import type { FileData } from "@gradio/client";
+	import { Gradio } from "@gradio/utils";
 	import UploadButton from "./shared/UploadButton.svelte";
 
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let label: string | null;
-	export let value: null | FileData | FileData[];
-	export let file_count: string;
-	export let file_types: string[] = [];
-	export let root: string;
-	export let size: "sm" | "lg" = "lg";
-	export let scale: number | null = null;
-	export let icon: FileData | null = null;
-	export let min_width: number | undefined = undefined;
-	export let variant: "primary" | "secondary" | "stop" = "secondary";
-	export let gradio: Gradio<{
-		change: never;
-		upload: never;
-		click: never;
-		error: string;
-	}>;
-	export let interactive: boolean;
+	const props = $props();
+	const gradio = new Gradio<UploadButtonEvents, UploadButtonProps>(props);
 
-	$: disabled = !interactive;
+	let value = $state(gradio.props.value);
+
+	$effect(() => {
+		if (value !== gradio.props.value) {
+			gradio.props.value = value;
+		}
+	});
 
 	async function handle_event(
 		detail: null | FileData | FileData[],
 		event: "change" | "upload" | "click"
 	): Promise<void> {
-		value = detail;
+		gradio.props.value = detail;
 		gradio.dispatch(event);
 	}
+
+	const disabled = $derived(!gradio.shared.interactive);
 </script>
 
 <UploadButton
-	{elem_id}
-	{elem_classes}
-	{visible}
-	{file_count}
-	{file_types}
-	{size}
-	{scale}
-	{icon}
-	{min_width}
-	{root}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	visible={gradio.shared.visible}
+	file_count={gradio.props.file_count}
+	file_types={gradio.props.file_types}
+	size={gradio.props.size}
+	scale={gradio.shared.scale}
+	icon={gradio.props.icon}
+	min_width={gradio.shared.min_width}
+	root={gradio.shared.root}
 	{value}
 	{disabled}
-	{variant}
-	{label}
-	max_file_size={gradio.max_file_size}
+	variant={gradio.props.variant}
+	label={gradio.shared.label}
+	max_file_size={gradio.shared.max_file_size}
 	on:click={() => gradio.dispatch("click")}
 	on:change={({ detail }) => handle_event(detail, "change")}
 	on:upload={({ detail }) => handle_event(detail, "upload")}
 	on:error={({ detail }) => {
 		gradio.dispatch("error", detail);
 	}}
-	upload={(...args) => gradio.client.upload(...args)}
+	upload={(...args) => gradio.shared.client.upload(...args)}
 >
-	{label ?? ""}
+	{gradio.shared.label ?? ""}
 </UploadButton>

package/dist/Index.svelte

@@ -1,52 +1,58 @@
-<script context="module">export { default as BaseUploadButton } from "./shared/UploadButton.svelte";
+<script lang="ts" context="module">
+	export { default as BaseUploadButton } from "./shared/UploadButton.svelte";
 </script>
 
-<script>import UploadButton from "./shared/UploadButton.svelte";
-export let elem_id = "";
-export let elem_classes = [];
-export let visible = true;
-export let label;
-export let value;
-export let file_count;
-export let file_types = [];
-export let root;
-export let size = "lg";
-export let scale = null;
-export let icon = null;
-export let min_width = void 0;
-export let variant = "secondary";
-export let gradio;
-export let interactive;
-$: disabled = !interactive;
-async function handle_event(detail, event) {
-  value = detail;
-  gradio.dispatch(event);
-}
+<script lang="ts">
+	import type { UploadButtonProps, UploadButtonEvents } from "./types";
+	import type { FileData } from "@gradio/client";
+	import { Gradio } from "@gradio/utils";
+	import UploadButton from "./shared/UploadButton.svelte";
+
+	const props = $props();
+	const gradio = new Gradio<UploadButtonEvents, UploadButtonProps>(props);
+
+	let value = $state(gradio.props.value);
+
+	$effect(() => {
+		if (value !== gradio.props.value) {
+			gradio.props.value = value;
+		}
+	});
+
+	async function handle_event(
+		detail: null | FileData | FileData[],
+		event: "change" | "upload" | "click"
+	): Promise<void> {
+		gradio.props.value = detail;
+		gradio.dispatch(event);
+	}
+
+	const disabled = $derived(!gradio.shared.interactive);
 </script>
 
 <UploadButton
-	{elem_id}
-	{elem_classes}
-	{visible}
-	{file_count}
-	{file_types}
-	{size}
-	{scale}
-	{icon}
-	{min_width}
-	{root}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	visible={gradio.shared.visible}
+	file_count={gradio.props.file_count}
+	file_types={gradio.props.file_types}
+	size={gradio.props.size}
+	scale={gradio.shared.scale}
+	icon={gradio.props.icon}
+	min_width={gradio.shared.min_width}
+	root={gradio.shared.root}
 	{value}
 	{disabled}
-	{variant}
-	{label}
-	max_file_size={gradio.max_file_size}
+	variant={gradio.props.variant}
+	label={gradio.shared.label}
+	max_file_size={gradio.shared.max_file_size}
 	on:click={() => gradio.dispatch("click")}
 	on:change={({ detail }) => handle_event(detail, "change")}
 	on:upload={({ detail }) => handle_event(detail, "upload")}
 	on:error={({ detail }) => {
 		gradio.dispatch("error", detail);
 	}}
-	upload={(...args) => gradio.client.upload(...args)}
+	upload={(...args) => gradio.shared.client.upload(...args)}
 >
-	{label ?? ""}
+	{gradio.shared.label ?? ""}
 </UploadButton>

package/dist/Index.svelte.d.ts

@@ -1,39 +1,4 @@
-import { SvelteComponent } from "svelte";
 export { default as BaseUploadButton } from "./shared/UploadButton.svelte";
-import type { Gradio } from "@gradio/utils";
-import type { FileData } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        elem_id?: string;
-        elem_classes?: string[];
-        visible?: boolean | "hidden";
-        label: string | null;
-        value: null | FileData | FileData[];
-        file_count: string;
-        file_types?: string[];
-        root: string;
-        size?: "sm" | "lg";
-        scale?: number | null;
-        icon?: FileData | null;
-        min_width?: number | undefined;
-        variant?: "primary" | "secondary" | "stop";
-        gradio: Gradio<{
-            change: never;
-            upload: never;
-            click: never;
-            error: string;
-        }>;
-        interactive: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
-}
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/shared/UploadButton.svelte

@@ -1,69 +1,83 @@
-<script>import { tick, createEventDispatcher } from "svelte";
-import { BaseButton } from "@gradio/button";
-import { prepare_files } from "@gradio/client";
-export let elem_id = "";
-export let elem_classes = [];
-export let visible = true;
-export let label;
-export let value;
-export let file_count;
-export let file_types = [];
-export let root;
-export let size = "lg";
-export let icon = null;
-export let scale = null;
-export let min_width = void 0;
-export let variant = "secondary";
-export let disabled = false;
-export let max_file_size = null;
-export let upload;
-const dispatch = createEventDispatcher();
-let hidden_upload;
-let accept_file_types;
-if (file_types == null) {
-  accept_file_types = null;
-} else {
-  file_types = file_types.map((x) => {
-    if (x.startsWith(".")) {
-      return x;
-    }
-    return x + "/*";
-  });
-  accept_file_types = file_types.join(", ");
-}
-function open_file_upload() {
-  dispatch("click");
-  hidden_upload.click();
-}
-async function load_files(files) {
-  let _files = Array.from(files);
-  if (!files.length) {
-    return;
-  }
-  if (file_count === "single") {
-    _files = [files[0]];
-  }
-  let all_file_data = await prepare_files(_files);
-  await tick();
-  try {
-    all_file_data = (await upload(all_file_data, root, void 0, max_file_size ?? Infinity))?.filter((x) => x !== null);
-  } catch (e) {
-    dispatch("error", e.message);
-    return;
-  }
-  value = file_count === "single" ? all_file_data?.[0] : all_file_data;
-  dispatch("change", value);
-  dispatch("upload", value);
-}
-async function load_files_from_upload(e) {
-  const target = e.target;
-  if (!target.files) return;
-  await load_files(target.files);
-}
-function clear_input_value(e) {
-  const target = e.target;
-  if (target.value) target.value = "";
-}
+<script lang="ts">
+	import { tick, createEventDispatcher } from "svelte";
+	import { BaseButton } from "@gradio/button";
+	import { prepare_files, type FileData, type Client } from "@gradio/client";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible: boolean | "hidden" = true;
+	export let label: string | null;
+	export let value: null | FileData | FileData[];
+	export let file_count: string;
+	export let file_types: string[] = [];
+	export let root: string;
+	export let size: "sm" | "md" | "lg" = "lg";
+	export let icon: FileData | null = null;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let variant: "primary" | "secondary" | "stop" = "secondary";
+	export let disabled = false;
+	export let max_file_size: number | null = null;
+	export let upload: Client["upload"];
+
+	const dispatch = createEventDispatcher();
+
+	let hidden_upload: HTMLInputElement;
+	let accept_file_types: string | null;
+
+	if (file_types == null) {
+		accept_file_types = null;
+	} else {
+		file_types = file_types.map((x) => {
+			if (x.startsWith(".")) {
+				return x;
+			}
+			return x + "/*";
+		});
+		accept_file_types = file_types.join(", ");
+	}
+
+	function open_file_upload(): void {
+		dispatch("click");
+		hidden_upload.click();
+	}
+
+	async function load_files(files: FileList): Promise<void> {
+		let _files: File[] = Array.from(files);
+
+		if (!files.length) {
+			return;
+		}
+		if (file_count === "single") {
+			_files = [files[0]];
+		}
+		let all_file_data = await prepare_files(_files);
+		await tick();
+
+		try {
+			all_file_data = (
+				await upload(all_file_data, root, undefined, max_file_size ?? Infinity)
+			)?.filter((x) => x !== null) as FileData[];
+		} catch (e) {
+			dispatch("error", (e as Error).message);
+			return;
+		}
+		value = file_count === "single" ? all_file_data?.[0] : all_file_data;
+		dispatch("change", value);
+		dispatch("upload", value);
+	}
+
+	async function load_files_from_upload(e: Event): Promise<void> {
+		const target = e.target as HTMLInputElement;
+
+		if (!target.files) return;
+		await load_files(target.files);
+	}
+
+	function clear_input_value(e: Event): void {
+		const target = e.target as HTMLInputElement;
+		if (target.value) target.value = "";
+	}
 </script>
 
 <input

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

@@ -1,41 +1,50 @@
-import { SvelteComponent } from "svelte";
 import { type FileData, type Client } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        elem_id?: string;
-        elem_classes?: string[];
-        visible?: boolean | "hidden";
-        label: string | null;
-        value: null | FileData | FileData[];
-        file_count: string;
-        file_types?: string[];
-        root: string;
-        size?: "sm" | "md" | "lg";
-        icon?: FileData | null;
-        scale?: number | null;
-        min_width?: number | undefined;
-        variant?: "primary" | "secondary" | "stop";
-        disabled?: boolean;
-        max_file_size?: number | null;
-        upload: Client["upload"];
+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: {
-        click: CustomEvent<any>;
-        error: CustomEvent<any>;
-        change: CustomEvent<any>;
-        upload: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type UploadButtonProps = typeof __propDef.props;
-export type UploadButtonEvents = typeof __propDef.events;
-export type UploadButtonSlots = typeof __propDef.slots;
-export default class UploadButton extends SvelteComponent<UploadButtonProps, UploadButtonEvents, UploadButtonSlots> {
+    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 UploadButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    elem_id?: string;
+    elem_classes?: string[];
+    visible?: boolean | "hidden";
+    label: string | null;
+    value: null | FileData | FileData[];
+    file_count: string;
+    file_types?: string[];
+    root: string;
+    size?: "sm" | "md" | "lg";
+    icon?: FileData | null;
+    scale?: number | null;
+    min_width?: number | undefined;
+    variant?: "primary" | "secondary" | "stop";
+    disabled?: boolean;
+    max_file_size?: number | null;
+    upload: Client["upload"];
+}, {
+    default: {};
+}>, {
+    click: CustomEvent<any>;
+    error: CustomEvent<any>;
+    change: CustomEvent<any>;
+    upload: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type UploadButton = InstanceType<typeof UploadButton>;
+export default UploadButton;

package/dist/types.d.ts

@@ -0,0 +1,15 @@
+import type { FileData } from "@gradio/client";
+export interface UploadButtonProps {
+    value: null | FileData | FileData[];
+    file_count: string;
+    file_types: string[];
+    size: "sm" | "lg";
+    icon: FileData | null;
+    variant: "primary" | "secondary" | "stop";
+}
+export interface UploadButtonEvents {
+    change: never;
+    upload: never;
+    click: never;
+    error: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/uploadbutton",
-  "version": "0.9.13-dev.0",
+  "version": "0.9.13-dev.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,16 +17,16 @@
   },
   "main": "./Index.svelte",
   "dependencies": {
-    "@gradio/client": "^2.0.0-dev.0",
-    "@gradio/upload": "^0.17.2-dev.0",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/button": "^0.5.14-dev.0"
+    "@gradio/client": "^2.0.0-dev.2",
+    "@gradio/upload": "^0.17.2-dev.2",
+    "@gradio/button": "^0.5.14-dev.2",
+    "@gradio/utils": "^0.10.3-dev.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.14.0"
+    "@gradio/preview": "^0.15.0-dev.0"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.43.4"
   },
   "repository": {
     "type": "git",

package/types.ts

@@ -0,0 +1,17 @@
+import type { FileData } from "@gradio/client";
+
+export interface UploadButtonProps {
+	value: null | FileData | FileData[];
+	file_count: string;
+	file_types: string[];
+	size: "sm" | "lg";
+	icon: FileData | null;
+	variant: "primary" | "secondary" | "stop";
+}
+
+export interface UploadButtonEvents {
+	change: never;
+	upload: never;
+	click: never;
+	error: string;
+}