@gradio/file 0.13.1-dev.0 → 0.13.1

package/CHANGELOG.md

@@ -1,4 +1,44 @@
 # @gradio/file
+## 0.13.1
+
+### Features
+
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Clear Error statuses
+- [#12438](https://github.com/gradio-app/gradio/pull/12438) [`25ffc03`](https://github.com/gradio-app/gradio/commit/25ffc0398f8feb43d817c02b2ab970c16de6d797) - Svelte5 migration and bugfix
+
+### Dependencies
+
+- @gradio/atoms@0.19.0
+- @gradio/client@2.0.0
+- @gradio/icons@0.15.0
+- @gradio/statustracker@0.12.0
+- @gradio/upload@0.17.2
+- @gradio/utils@0.10.3
+
+## 0.13.1-dev.2
+
+### Dependency updates
+
+- @gradio/atoms@0.19.0-dev.1
+- @gradio/client@2.0.0-dev.2
+- @gradio/statustracker@0.12.0-dev.1
+- @gradio/upload@0.17.2-dev.2
+
+## 0.13.1-dev.1
+
+### Dependency updates
+
+- @gradio/atoms@0.18.2-dev.0
+- @gradio/upload@0.17.2-dev.1
+- @gradio/utils@0.10.3-dev.0
+- @gradio/statustracker@0.12.0-dev.0
+- @gradio/icons@0.15.0-dev.0
+
+## 0.13.1-dev.0
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.1
 
 ## 0.13.1-dev.0
 

package/Index.svelte

@@ -8,115 +8,102 @@
 </script>
 
 <script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
+	import { Gradio } from "@gradio/utils";
 	import File from "./shared/File.svelte";
 	import FileUpload from "./shared/FileUpload.svelte";
-	import type { FileData } from "@gradio/client";
 	import { Block, UploadText } from "@gradio/atoms";
-
+	import type { FileEvents, FileProps } from "./types";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
+	import { tick } from "svelte";
 
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let value: null | FileData | FileData[];
+	const props = $props();
+	let upload_promise = $state<Promise<any>>();
 
-	export let interactive: boolean;
-	export let root: string;
-	export let label: string;
-	export let show_label: boolean;
-	export let height: number | undefined = undefined;
+	let dragging = $state(false);
+	let pending_upload = $state(false);
 
-	export let _selectable = false;
-	export let loading_status: LoadingStatus;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let gradio: Gradio<{
-		change: never;
-		error: string;
-		upload: never;
-		clear: never;
-		select: SelectData;
-		clear_status: LoadingStatus;
-		delete: FileData;
-		download: FileData;
-	}>;
-	export let file_count: "single" | "multiple" | "directory";
-	export let file_types: string[] = ["file"];
-	export let input_ready: boolean;
-	export let allow_reordering = false;
-	let uploading = false;
-	$: input_ready = !uploading;
+	class FileGradio extends Gradio<FileEvents, FileProps> {
+		async get_data() {
+			if (upload_promise) {
+				await upload_promise;
+				await tick();
+			}
+			const data = await super.get_data();
 
-	let old_value = value;
-	$: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
-		gradio.dispatch("change");
-		old_value = value;
+			return data;
+		}
 	}
 
-	let dragging = false;
-	let pending_upload = false;
+	const gradio = new FileGradio(props);
+
+	let old_value = $state(gradio.props.value);
+
+	$effect(() => {
+		if (old_value !== gradio.props.value) {
+			old_value = gradio.props.value;
+			gradio.dispatch("change", $state.snapshot(gradio.props.value));
+		}
+	});
 </script>
 
 <Block
-	{visible}
-	variant={value ? "solid" : "dashed"}
+	visible={gradio.shared.visible}
+	variant={gradio.props.value ? "solid" : "dashed"}
 	border_mode={dragging ? "focus" : "base"}
 	padding={false}
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	container={gradio.shared.container}
+	scale={gradio.shared.scale}
+	min_width={gradio.shared.min_width}
 	allow_overflow={false}
 >
 	<StatusTracker
-		autoscroll={gradio.autoscroll}
+		autoscroll={gradio.shared.autoscroll}
 		i18n={gradio.i18n}
-		{...loading_status}
+		{...gradio.shared.loading_status}
 		status={pending_upload
 			? "generating"
-			: loading_status?.status || "complete"}
-		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+			: gradio.shared.loading_status?.status || "complete"}
+		on_clear_status={() =>
+			gradio.dispatch("clear_status", gradio.shared.loading_status)}
 	/>
-	{#if !interactive}
+	{#if !gradio.shared.interactive}
 		<File
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:download={({ detail }) => gradio.dispatch("download", detail)}
-			selectable={_selectable}
-			{value}
-			{label}
-			{show_label}
-			{height}
+			on_select={({ detail }) => gradio.dispatch("select", detail)}
+			on_download={({ detail }) => gradio.dispatch("download", detail)}
+			selectable={gradio.props._selectable}
+			value={gradio.props.value}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			height={gradio.props.height}
 			i18n={gradio.i18n}
 		/>
 	{:else}
 		<FileUpload
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
-			{label}
-			{show_label}
-			{value}
-			{file_count}
-			{file_types}
-			selectable={_selectable}
-			{root}
-			{height}
-			{allow_reordering}
-			bind:uploading
-			max_file_size={gradio.max_file_size}
+			bind:upload_promise
+			upload={(...args) => gradio.shared.client.upload(...args)}
+			stream_handler={(...args) => gradio.shared.client.stream(...args)}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			value={gradio.props.value}
+			file_count={gradio.props.file_count}
+			file_types={gradio.props.file_types}
+			selectable={gradio.props._selectable}
+			height={gradio.props.height}
+			root={gradio.shared.root}
+			allow_reordering={gradio.props.allow_reordering}
+			max_file_size={gradio.shared.max_file_size}
 			on:change={({ detail }) => {
-				value = 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 }) => {
-				loading_status = loading_status || {};
-				loading_status.status = "error";
+				gradio.shared.loading_status = gradio.shared.loading_status || {};
+				gradio.shared.loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
 			on:delete={({ detail }) => {

package/dist/Example.svelte

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

package/dist/Example.svelte.d.ts

@@ -1,21 +1,23 @@
-import { SvelteComponent } from "svelte";
 import type { FileData } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        value: FileData | null;
-        type: "gallery" | "table";
-        selected?: boolean;
+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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ExampleProps = typeof __propDef.props;
-export type ExampleEvents = typeof __propDef.events;
-export type ExampleSlots = typeof __propDef.slots;
-export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Example: $$__sveltets_2_IsomorphicComponent<{
+    value: FileData | null;
+    type: "gallery" | "table";
+    selected?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Example = InstanceType<typeof Example>;
+export default Example;

package/dist/Index.svelte

@@ -1,102 +1,109 @@
 <svelte:options accessors={true} />
 
-<script context="module">export { default as FilePreview } from "./shared/FilePreview.svelte";
-export { default as BaseFileUpload } from "./shared/FileUpload.svelte";
-export { default as BaseFile } from "./shared/File.svelte";
-export { default as BaseExample } from "./Example.svelte";
+<script context="module" lang="ts">
+	export { default as FilePreview } from "./shared/FilePreview.svelte";
+	export { default as BaseFileUpload } from "./shared/FileUpload.svelte";
+	export { default as BaseFile } from "./shared/File.svelte";
+	export { default as BaseExample } from "./Example.svelte";
 </script>
 
-<script>import File from "./shared/File.svelte";
-import FileUpload from "./shared/FileUpload.svelte";
-import { Block, UploadText } from "@gradio/atoms";
-import { StatusTracker } from "@gradio/statustracker";
-export let elem_id = "";
-export let elem_classes = [];
-export let visible = true;
-export let value;
-export let interactive;
-export let root;
-export let label;
-export let show_label;
-export let height = void 0;
-export let _selectable = false;
-export let loading_status;
-export let container = true;
-export let scale = null;
-export let min_width = void 0;
-export let gradio;
-export let file_count;
-export let file_types = ["file"];
-export let input_ready;
-export let allow_reordering = false;
-let uploading = false;
-$: input_ready = !uploading;
-let old_value = value;
-$: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
-  gradio.dispatch("change");
-  old_value = value;
-}
-let dragging = false;
-let pending_upload = false;
+<script lang="ts">
+	import { Gradio } from "@gradio/utils";
+	import File from "./shared/File.svelte";
+	import FileUpload from "./shared/FileUpload.svelte";
+	import { Block, UploadText } from "@gradio/atoms";
+	import type { FileEvents, FileProps } from "./types";
+	import { StatusTracker } from "@gradio/statustracker";
+	import { tick } from "svelte";
+
+	const props = $props();
+	let upload_promise = $state<Promise<any>>();
+
+	let dragging = $state(false);
+	let pending_upload = $state(false);
+
+	class FileGradio extends Gradio<FileEvents, FileProps> {
+		async get_data() {
+			if (upload_promise) {
+				await upload_promise;
+				await tick();
+			}
+			const data = await super.get_data();
+
+			return data;
+		}
+	}
+
+	const gradio = new FileGradio(props);
+
+	let old_value = $state(gradio.props.value);
+
+	$effect(() => {
+		if (old_value !== gradio.props.value) {
+			old_value = gradio.props.value;
+			gradio.dispatch("change", $state.snapshot(gradio.props.value));
+		}
+	});
 </script>
 
 <Block
-	{visible}
-	variant={value ? "solid" : "dashed"}
+	visible={gradio.shared.visible}
+	variant={gradio.props.value ? "solid" : "dashed"}
 	border_mode={dragging ? "focus" : "base"}
 	padding={false}
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	container={gradio.shared.container}
+	scale={gradio.shared.scale}
+	min_width={gradio.shared.min_width}
 	allow_overflow={false}
 >
 	<StatusTracker
-		autoscroll={gradio.autoscroll}
+		autoscroll={gradio.shared.autoscroll}
 		i18n={gradio.i18n}
-		{...loading_status}
+		{...gradio.shared.loading_status}
 		status={pending_upload
 			? "generating"
-			: loading_status?.status || "complete"}
-		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+			: gradio.shared.loading_status?.status || "complete"}
+		on_clear_status={() =>
+			gradio.dispatch("clear_status", gradio.shared.loading_status)}
 	/>
-	{#if !interactive}
+	{#if !gradio.shared.interactive}
 		<File
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:download={({ detail }) => gradio.dispatch("download", detail)}
-			selectable={_selectable}
-			{value}
-			{label}
-			{show_label}
-			{height}
+			on_select={({ detail }) => gradio.dispatch("select", detail)}
+			on_download={({ detail }) => gradio.dispatch("download", detail)}
+			selectable={gradio.props._selectable}
+			value={gradio.props.value}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			height={gradio.props.height}
 			i18n={gradio.i18n}
 		/>
 	{:else}
 		<FileUpload
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
-			{label}
-			{show_label}
-			{value}
-			{file_count}
-			{file_types}
-			selectable={_selectable}
-			{root}
-			{height}
-			{allow_reordering}
-			bind:uploading
-			max_file_size={gradio.max_file_size}
+			bind:upload_promise
+			upload={(...args) => gradio.shared.client.upload(...args)}
+			stream_handler={(...args) => gradio.shared.client.stream(...args)}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			value={gradio.props.value}
+			file_count={gradio.props.file_count}
+			file_types={gradio.props.file_types}
+			selectable={gradio.props._selectable}
+			height={gradio.props.height}
+			root={gradio.shared.root}
+			allow_reordering={gradio.props.allow_reordering}
+			max_file_size={gradio.shared.max_file_size}
 			on:change={({ detail }) => {
-				value = 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 }) => {
-				loading_status = loading_status || {};
-				loading_status.status = "error";
+				gradio.shared.loading_status = gradio.shared.loading_status || {};
+				gradio.shared.loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
 			on:delete={({ detail }) => {

package/dist/Index.svelte.d.ts

@@ -1,126 +1,7 @@
-import { SvelteComponent } from "svelte";
 export { default as FilePreview } from "./shared/FilePreview.svelte";
 export { default as BaseFileUpload } from "./shared/FileUpload.svelte";
 export { default as BaseFile } from "./shared/File.svelte";
 export { default as BaseExample } from "./Example.svelte";
-import type { Gradio, SelectData } from "@gradio/utils";
-import type { FileData } from "@gradio/client";
-import type { LoadingStatus } from "@gradio/statustracker";
-declare const __propDef: {
-    props: {
-        elem_id?: string;
-        elem_classes?: string[];
-        visible?: boolean | "hidden";
-        value: null | FileData | FileData[];
-        interactive: boolean;
-        root: string;
-        label: string;
-        show_label: boolean;
-        height?: number | undefined;
-        _selectable?: boolean;
-        loading_status: LoadingStatus;
-        container?: boolean;
-        scale?: number | null;
-        min_width?: number | undefined;
-        gradio: Gradio<{
-            change: never;
-            error: string;
-            upload: never;
-            clear: never;
-            select: SelectData;
-            clear_status: LoadingStatus;
-            delete: FileData;
-            download: FileData;
-        }>;
-        file_count: "single" | "multiple" | "directory";
-        file_types?: string[];
-        input_ready: boolean;
-        allow_reordering?: 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> {
-    get elem_id(): string | undefined;
-    /**accessor*/
-    set elem_id(_: string | undefined);
-    get elem_classes(): string[] | undefined;
-    /**accessor*/
-    set elem_classes(_: string[] | undefined);
-    get visible(): boolean | "hidden" | undefined;
-    /**accessor*/
-    set visible(_: boolean | "hidden" | undefined);
-    get value(): any;
-    /**accessor*/
-    set value(_: any);
-    get interactive(): boolean;
-    /**accessor*/
-    set interactive(_: boolean);
-    get root(): string;
-    /**accessor*/
-    set root(_: string);
-    get label(): string;
-    /**accessor*/
-    set label(_: string);
-    get show_label(): boolean;
-    /**accessor*/
-    set show_label(_: boolean);
-    get height(): number | undefined;
-    /**accessor*/
-    set height(_: number | undefined);
-    get _selectable(): boolean | undefined;
-    /**accessor*/
-    set _selectable(_: boolean | undefined);
-    get loading_status(): LoadingStatus;
-    /**accessor*/
-    set loading_status(_: LoadingStatus);
-    get container(): boolean | undefined;
-    /**accessor*/
-    set container(_: boolean | undefined);
-    get scale(): number | null | undefined;
-    /**accessor*/
-    set scale(_: number | null | undefined);
-    get min_width(): number | undefined;
-    /**accessor*/
-    set min_width(_: number | undefined);
-    get gradio(): Gradio<{
-        change: never;
-        error: string;
-        upload: never;
-        clear: never;
-        select: SelectData;
-        clear_status: LoadingStatus;
-        delete: FileData;
-        download: FileData;
-    }>;
-    /**accessor*/
-    set gradio(_: Gradio<{
-        change: never;
-        error: string;
-        upload: never;
-        clear: never;
-        select: SelectData;
-        clear_status: LoadingStatus;
-        delete: FileData;
-        download: FileData;
-    }>);
-    get file_count(): "multiple" | "single" | "directory";
-    /**accessor*/
-    set file_count(_: "multiple" | "single" | "directory");
-    get file_types(): string[] | undefined;
-    /**accessor*/
-    set file_types(_: string[] | undefined);
-    get input_ready(): boolean;
-    /**accessor*/
-    set input_ready(_: boolean);
-    get allow_reordering(): boolean | undefined;
-    /**accessor*/
-    set allow_reordering(_: boolean | undefined);
-}
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/shared/File.svelte

@@ -1,12 +1,18 @@
-<script>import { BlockLabel, Empty } from "@gradio/atoms";
-import { File } from "@gradio/icons";
-import FilePreview from "./FilePreview.svelte";
-export let value = null;
-export let label;
-export let show_label = true;
-export let selectable = false;
-export let height = void 0;
-export let i18n;
+<script lang="ts">
+	import { BlockLabel, Empty } from "@gradio/atoms";
+	import { File } from "@gradio/icons";
+	import FilePreview from "./FilePreview.svelte";
+
+	let {
+		value,
+		label,
+		show_label,
+		selectable,
+		i18n,
+		height,
+		on_select,
+		on_download
+	} = $props();
 </script>
 
 <BlockLabel
@@ -17,7 +23,14 @@ export let i18n;
 />
 
 {#if value && (Array.isArray(value) ? value.length > 0 : true)}
-	<FilePreview {i18n} {selectable} on:select on:download {value} {height} />
+	<FilePreview
+		{i18n}
+		{selectable}
+		on:select={on_select}
+		on:download={on_download}
+		{value}
+		{height}
+	/>
 {:else}
 	<Empty unpadded_box={true} size="large"><File /></Empty>
 {/if}