@gradio/file 0.9.3 → 0.9.4-beta.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @gradio/file
 
+## 0.9.4-beta.1
+
+### Features
+
+- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.9.4-beta.0
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.0
+- @gradio/statustracker@0.8.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/client@1.6.0-beta.0
+- @gradio/icons@0.8.0-beta.0
+- @gradio/upload@0.12.4-beta.0
+- @gradio/wasm@0.13.1-beta.0
+
 ## 0.9.3
 
 ### Features

package/dist/Example.svelte

@@ -0,0 +1,27 @@
+<script>export let value;
+export let type;
+export let selected = false;
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value ? (Array.isArray(value) ? value.join(", ") : value) : ""}
+</div>
+
+<style>
+	div {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		padding: var(--size-1) var(--size-2);
+		text-align: left;
+	}
+</style>

package/dist/Example.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { FileData } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        value: FileData | null;
+        type: "gallery" | "table";
+        selected?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/Index.svelte

@@ -0,0 +1,104 @@
+<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>
+
+<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"];
+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>
+
+<Block
+	{visible}
+	variant={value ? "solid" : "dashed"}
+	border_mode={dragging ? "focus" : "base"}
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	{container}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+		status={pending_upload
+			? "generating"
+			: loading_status?.status || "complete"}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+	/>
+	{#if !interactive}
+		<File
+			on:select={({ detail }) => gradio.dispatch("select", detail)}
+			selectable={_selectable}
+			{value}
+			{label}
+			{show_label}
+			{height}
+			i18n={gradio.i18n}
+		/>
+	{:else}
+		<FileUpload
+			upload={gradio.client.upload}
+			stream_handler={gradio.client.stream}
+			{label}
+			{show_label}
+			{value}
+			{file_count}
+			{file_types}
+			selectable={_selectable}
+			{root}
+			{height}
+			max_file_size={gradio.max_file_size}
+			on:change={({ detail }) => {
+				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.dispatch("error", detail);
+			}}
+			on:delete={({ detail }) => {
+				gradio.dispatch("delete", detail);
+			}}
+			i18n={gradio.i18n}
+		>
+			<UploadText i18n={gradio.i18n} type="file" />
+		</FileUpload>
+	{/if}
+</Block>

package/dist/Index.svelte.d.ts

@@ -0,0 +1,113 @@
+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 | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        value: null | FileData | FileData[];
+        interactive: boolean;
+        root: string;
+        label: string;
+        show_label: boolean;
+        height?: number | undefined;
+        _selectable?: boolean | undefined;
+        loading_status: LoadingStatus;
+        container?: boolean | undefined;
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        gradio: Gradio<{
+            change: never;
+            error: string;
+            upload: never;
+            clear: never;
+            select: SelectData;
+            clear_status: LoadingStatus;
+            delete: FileData;
+        }>;
+        file_count: "single" | "multiple" | "directory";
+        file_types?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 | undefined;
+    /**accessor*/
+    set visible(_: boolean | undefined);
+    get value(): FileData | FileData[] | null;
+    /**accessor*/
+    set value(_: FileData | FileData[] | null);
+    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;
+    }>;
+    /**accessor*/
+    set gradio(_: Gradio<{
+        change: never;
+        error: string;
+        upload: never;
+        clear: never;
+        select: SelectData;
+        clear_status: LoadingStatus;
+        delete: 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);
+}

package/dist/shared/File.svelte

@@ -0,0 +1,23 @@
+<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>
+
+<BlockLabel
+	{show_label}
+	float={value === null}
+	Icon={File}
+	label={label || "File"}
+/>
+
+{#if value && (Array.isArray(value) ? value.length > 0 : true)}
+	<FilePreview {i18n} {selectable} on:select {value} {height} />
+{:else}
+	<Empty unpadded_box={true} size="large"><File /></Empty>
+{/if}

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { FileData } from "@gradio/client";
+import type { I18nFormatter } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        value?: (FileData | FileData[] | null) | undefined;
+        label: string;
+        show_label?: boolean | undefined;
+        selectable?: boolean | undefined;
+        height?: number | undefined;
+        i18n: I18nFormatter;
+    };
+    events: {
+        select: CustomEvent<import("@gradio/utils").SelectData>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FileProps = typeof __propDef.props;
+export type FileEvents = typeof __propDef.events;
+export type FileSlots = typeof __propDef.slots;
+export default class File extends SvelteComponent<FileProps, FileEvents, FileSlots> {
+}
+export {};

package/dist/shared/FilePreview.svelte

@@ -0,0 +1,182 @@
+<script>import { prettyBytes } from "./utils";
+import { createEventDispatcher } from "svelte";
+import { DownloadLink } from "@gradio/wasm/svelte";
+const dispatch = createEventDispatcher();
+export let value;
+export let selectable = false;
+export let height = void 0;
+export let i18n;
+function split_filename(filename) {
+  const last_dot = filename.lastIndexOf(".");
+  if (last_dot === -1) {
+    return [filename, ""];
+  }
+  return [filename.slice(0, last_dot), filename.slice(last_dot)];
+}
+$:
+  normalized_files = (Array.isArray(value) ? value : [value]).map((file) => {
+    const [filename_stem, filename_ext] = split_filename(file.orig_name ?? "");
+    return {
+      ...file,
+      filename_stem,
+      filename_ext
+    };
+  });
+function handle_row_click(event, index) {
+  const tr = event.currentTarget;
+  const should_select = event.target === tr || // Only select if the click is on the row itself
+  tr && tr.firstElementChild && event.composedPath().includes(tr.firstElementChild);
+  if (should_select) {
+    dispatch("select", { value: normalized_files[index].orig_name, index });
+  }
+}
+function remove_file(index) {
+  const removed = normalized_files.splice(index, 1);
+  normalized_files = [...normalized_files];
+  value = normalized_files;
+  dispatch("delete", removed[0]);
+  dispatch("change", normalized_files);
+}
+const is_browser = typeof window !== "undefined";
+</script>
+
+<div
+	class="file-preview-holder"
+	style="max-height: {typeof height === undefined ? 'auto' : height + 'px'};"
+>
+	<table class="file-preview">
+		<tbody>
+			{#each normalized_files as file, i (file)}
+				<tr
+					class="file"
+					class:selectable
+					on:click={(event) => {
+						handle_row_click(event, i);
+					}}
+				>
+					<td class="filename" aria-label={file.orig_name}>
+						<span class="stem">{file.filename_stem}</span>
+						<span class="ext">{file.filename_ext}</span>
+					</td>
+
+					<td class="download">
+						{#if file.url}
+							<DownloadLink
+								href={file.url}
+								download={is_browser && window.__is_colab__
+									? null
+									: file.orig_name}
+							>
+								{@html file.size != null
+									? prettyBytes(file.size)
+									: "(size unknown)"}&nbsp;&#8675;
+							</DownloadLink>
+						{:else}
+							{i18n("file.uploading")}
+						{/if}
+					</td>
+
+					{#if normalized_files.length > 1}
+						<td>
+							<button
+								class="label-clear-button"
+								aria-label="Remove this file"
+								on:click={() => {
+									remove_file(i);
+								}}
+								on:keydown={(event) => {
+									if (event.key === "Enter") {
+										remove_file(i);
+									}
+								}}
+								>×
+							</button>
+						</td>
+					{/if}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	.label-clear-button {
+		color: var(--body-text-color-subdued);
+		position: relative;
+		left: -3px;
+	}
+
+	.label-clear-button:hover {
+		color: var(--body-text-color);
+	}
+
+	.file-preview {
+		table-layout: fixed;
+		width: var(--size-full);
+		max-height: var(--size-60);
+		overflow-y: auto;
+		margin-top: var(--size-1);
+		color: var(--body-text-color);
+	}
+
+	.file-preview-holder {
+		overflow: auto;
+	}
+
+	.file {
+		display: flex;
+		width: var(--size-full);
+	}
+
+	.file > * {
+		padding: var(--size-1) var(--size-2-5);
+	}
+
+	.filename {
+		flex-grow: 1;
+		display: flex;
+		overflow: hidden;
+	}
+	.filename .stem {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.filename .ext {
+		white-space: nowrap;
+	}
+
+	.download {
+		min-width: 8rem;
+		width: 10%;
+		white-space: nowrap;
+		text-align: right;
+	}
+	.download:hover {
+		text-decoration: underline;
+	}
+	.download > :global(a) {
+		color: var(--link-text-color);
+	}
+
+	.download > :global(a:hover) {
+		color: var(--link-text-color-hover);
+	}
+	.download > :global(a:visited) {
+		color: var(--link-text-color-visited);
+	}
+	.download > :global(a:active) {
+		color: var(--link-text-color-active);
+	}
+	.selectable {
+		cursor: pointer;
+	}
+
+	tbody > tr:nth-child(even) {
+		background: var(--block-background-fill);
+	}
+
+	tbody > tr:nth-child(odd) {
+		background: var(--table-odd-background-fill);
+	}
+</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { FileData } from "@gradio/client";
+import type { I18nFormatter, SelectData } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        value: FileData | FileData[];
+        selectable?: boolean | undefined;
+        height?: number | undefined;
+        i18n: I18nFormatter;
+    };
+    events: {
+        select: CustomEvent<SelectData>;
+        change: CustomEvent<FileData | FileData[]>;
+        delete: CustomEvent<FileData>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FilePreviewProps = typeof __propDef.props;
+export type FilePreviewEvents = typeof __propDef.events;
+export type FilePreviewSlots = typeof __propDef.slots;
+export default class FilePreview extends SvelteComponent<FilePreviewProps, FilePreviewEvents, FilePreviewSlots> {
+}
+export {};

package/dist/shared/FileUpload.svelte

@@ -0,0 +1,64 @@
+<script>import { createEventDispatcher, tick } from "svelte";
+import { Upload, ModifyUpload } from "@gradio/upload";
+import { BlockLabel } from "@gradio/atoms";
+import { File } from "@gradio/icons";
+import FilePreview from "./FilePreview.svelte";
+export let value;
+export let label;
+export let show_label = true;
+export let file_count = "single";
+export let file_types = null;
+export let selectable = false;
+export let root;
+export let height = void 0;
+export let i18n;
+export let max_file_size = null;
+export let upload;
+export let stream_handler;
+async function handle_upload({
+  detail
+}) {
+  value = detail;
+  await tick();
+  dispatch("change", value);
+  dispatch("upload", detail);
+}
+function handle_clear() {
+  value = null;
+  dispatch("change", null);
+  dispatch("clear");
+}
+const dispatch = createEventDispatcher();
+let dragging = false;
+$:
+  dispatch("drag", dragging);
+</script>
+
+<BlockLabel {show_label} Icon={File} float={!value} label={label || "File"} />
+
+{#if value && (Array.isArray(value) ? value.length > 0 : true)}
+	<ModifyUpload {i18n} on:clear={handle_clear} absolute />
+	<FilePreview
+		{i18n}
+		on:select
+		{selectable}
+		{value}
+		{height}
+		on:change
+		on:delete
+	/>
+{:else}
+	<Upload
+		on:load={handle_upload}
+		filetype={file_types}
+		{file_count}
+		{max_file_size}
+		{root}
+		bind:dragging
+		on:error
+		{stream_handler}
+		{upload}
+	>
+		<slot />
+	</Upload>
+{/if}

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

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+import type { FileData, Client } from "@gradio/client";
+import type { I18nFormatter } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        value: null | FileData | FileData[];
+        label: string;
+        show_label?: boolean | undefined;
+        file_count?: ("single" | "multiple" | "directory") | undefined;
+        file_types?: (string[] | null) | undefined;
+        selectable?: boolean | undefined;
+        root: string;
+        height?: number | undefined;
+        i18n: I18nFormatter;
+        max_file_size?: (number | null) | undefined;
+        upload: Client["upload"];
+        stream_handler: Client["stream"];
+    };
+    events: {
+        select: CustomEvent<import("@gradio/utils").SelectData>;
+        change: CustomEvent<any>;
+        delete: CustomEvent<FileData>;
+        error: CustomEvent<any>;
+        clear: CustomEvent<undefined>;
+        drag: CustomEvent<boolean>;
+        upload: CustomEvent<FileData | FileData[]>;
+        load: CustomEvent<FileData | FileData[]>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FileUploadProps = typeof __propDef.props;
+export type FileUploadEvents = typeof __propDef.events;
+export type FileUploadSlots = typeof __propDef.slots;
+export default class FileUpload extends SvelteComponent<FileUploadProps, FileUploadEvents, FileUploadSlots> {
+}
+export {};

package/dist/shared/utils.d.ts

@@ -0,0 +1 @@
+export declare const prettyBytes: (bytes: number) => string;

package/dist/shared/utils.js

@@ -0,0 +1,10 @@
+export const prettyBytes = (bytes) => {
+    let units = ["B", "KB", "MB", "GB", "PB"];
+    let i = 0;
+    while (bytes > 1024) {
+        bytes /= 1024;
+        i++;
+    }
+    let unit = units[i];
+    return bytes.toFixed(1) + " " + unit;
+};

package/package.json

@@ -1,30 +1,41 @@
 {
   "name": "@gradio/file",
-  "version": "0.9.3",
+  "version": "0.9.4-beta.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/atoms": "^0.8.0",
-    "@gradio/client": "^1.5.1",
-    "@gradio/icons": "^0.7.1",
-    "@gradio/statustracker": "^0.7.5",
-    "@gradio/upload": "^0.12.3",
-    "@gradio/utils": "^0.6.0",
-    "@gradio/wasm": "^0.13.0"
+    "@gradio/atoms": "^0.8.1-beta.1",
+    "@gradio/client": "^1.6.0-beta.1",
+    "@gradio/icons": "^0.8.0-beta.1",
+    "@gradio/upload": "^0.12.4-beta.1",
+    "@gradio/wasm": "^0.13.1-beta.1",
+    "@gradio/statustracker": "^0.8.0-beta.1",
+    "@gradio/utils": "^0.7.0-beta.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.0"
+    "@gradio/preview": "^0.11.1-beta.0"
   },
   "main": "./Index.svelte",
   "main_changeset": true,
   "exports": {
-    ".": "./Index.svelte",
-    "./example": "./Example.svelte",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
     "./package.json": "./package.json"
   },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gradio-app/gradio.git",

package/shared/FilePreview.svelte

@@ -55,6 +55,8 @@
 		dispatch("delete", removed[0]);
 		dispatch("change", normalized_files);
 	}
+
+	const is_browser = typeof window !== "undefined";
 </script>
 
 <div
@@ -80,7 +82,9 @@
 						{#if file.url}
 							<DownloadLink
 								href={file.url}
-								download={window.__is_colab__ ? null : file.orig_name}
+								download={is_browser && window.__is_colab__
+									? null
+									: file.orig_name}
 							>
 								{@html file.size != null
 									? prettyBytes(file.size)