gradio

1
<svelte:options accessors={true} />
2

3
<script context="module" lang="ts">
4
	export { default as FilePreview } from "./shared/FilePreview.svelte";
5
	export { default as BaseFileUpload } from "./shared/FileUpload.svelte";
6
	export { default as BaseFile } from "./shared/File.svelte";
7
	export { default as BaseExample } from "./Example.svelte";
8
</script>
9

10
<script lang="ts">
11
	import type { Gradio, SelectData } from "@gradio/utils";
12
	import File from "./shared/File.svelte";
13
	import FileUpload from "./shared/FileUpload.svelte";
14
	import type { FileData } from "@gradio/client";
15
	import { Block, UploadText } from "@gradio/atoms";
16

17
	import { StatusTracker } from "@gradio/statustracker";
18
	import type { LoadingStatus } from "@gradio/statustracker";
19

20
	export let elem_id = "";
21
	export let elem_classes: string[] = [];
22
	export let visible = true;
23
	export let value: null | FileData | FileData[];
24

25
	export let interactive: boolean;
26
	export let root: string;
27
	export let label: string;
28
	export let show_label: boolean;
29
	export let height: number | undefined = undefined;
30

31
	export let _selectable = false;
32
	export let loading_status: LoadingStatus;
33
	export let container = true;
34
	export let scale: number | null = null;
35
	export let min_width: number | undefined = undefined;
36
	export let gradio: Gradio<{
37
		change: never;
38
		error: string;
39
		upload: never;
40
		clear: never;
41
		select: SelectData;
42
	}>;
43
	export let file_count: string;
44
	export let file_types: string[] = ["file"];
45

46
	let old_value = value;
47
	$: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
48
		gradio.dispatch("change");
49
		old_value = value;
50
	}
51

52
	let dragging = false;
53
	let pending_upload = false;
54
</script>
55

56
<Block
57
	{visible}
58
	variant={value === null ? "dashed" : "solid"}
59
	border_mode={dragging ? "focus" : "base"}
60
	padding={false}
61
	{elem_id}
62
	{elem_classes}
63
	{container}
64
	{scale}
65
	{min_width}
66
	allow_overflow={false}
67
>
68
	<StatusTracker
69
		autoscroll={gradio.autoscroll}
70
		i18n={gradio.i18n}
71
		{...loading_status}
72
		status={pending_upload
73
			? "generating"
74
			: loading_status?.status || "complete"}
75
	/>
76
	{#if !interactive}
77
		<File
78
			on:select={({ detail }) => gradio.dispatch("select", detail)}
79
			selectable={_selectable}
80
			{value}
81
			{label}
82
			{show_label}
83
			{height}
84
			i18n={gradio.i18n}
85
		/>
86
	{:else}
87
		<FileUpload
88
			{label}
89
			{show_label}
90
			{value}
91
			{file_count}
92
			{file_types}
93
			selectable={_selectable}
94
			{root}
95
			{height}
96
			on:change={({ detail }) => {
97
				value = detail;
98
			}}
99
			on:drag={({ detail }) => (dragging = detail)}
100
			on:clear={() => gradio.dispatch("clear")}
101
			on:select={({ detail }) => gradio.dispatch("select", detail)}
102
			on:upload={() => gradio.dispatch("upload")}
103
			i18n={gradio.i18n}
104
		>
105
			<UploadText i18n={gradio.i18n} type="file" />
106
		</FileUpload>
107
	{/if}
108
</Block>
109