/
StaticFile.svelte
125 lines (110 loc) 路 3.27 KB
/
StaticFile.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<svelte:options accessors={true} />
<script lang="ts">
import { createEventDispatcher, getContext } from "svelte";
import File from "./File.svelte";
import { blobToBase64 } from "@gradio/upload";
import type { FileData } from "@gradio/upload";
import { normalise_file } from "@gradio/upload";
import { Block } from "@gradio/atoms";
import { upload_files as default_upload_files } from "@gradio/client";
import { StatusTracker } from "@gradio/statustracker";
import type { LoadingStatus } from "@gradio/statustracker";
import { _ } from "svelte-i18n";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: null | FileData | FileData[];
let old_value: null | FileData | FileData[];
export let mode: "static" | "interactive";
export let root: string;
export let label: string;
export let show_label: boolean;
export let height: number | undefined = undefined;
export let root_url: null | string;
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;
const upload_files =
getContext<typeof default_upload_files>("upload_files") ??
default_upload_files;
$: _value = normalise_file(value, root, root_url);
let dragging = false;
let pending_upload = false;
const dispatch = createEventDispatcher<{
change: undefined;
error: string;
upload: undefined;
}>();
$: {
if (JSON.stringify(_value) !== JSON.stringify(old_value)) {
old_value = _value;
if (_value === null) {
dispatch("change");
pending_upload = false;
} else if (
!(Array.isArray(_value) ? _value : [_value]).every(
(file_data) => file_data.blob
)
) {
pending_upload = false;
dispatch("change");
} else if (mode === "interactive") {
let files = (Array.isArray(_value) ? _value : [_value]).map(
(file_data) => file_data.blob!
);
let upload_value = _value;
pending_upload = true;
upload_files(root, files).then((response) => {
if (upload_value !== _value) {
// value has changed since upload started
return;
}
pending_upload = false;
if (response.error) {
(Array.isArray(_value) ? _value : [_value]).forEach(
async (file_data, i) => {
file_data.data = await blobToBase64(file_data.blob!);
file_data.blob = undefined;
}
);
} else {
(Array.isArray(_value) ? _value : [_value]).forEach(
(file_data, i) => {
if (response.files) {
file_data.orig_name = file_data.name;
file_data.name = response.files[i];
file_data.is_file = true;
file_data.blob = undefined;
}
}
);
old_value = _value = normalise_file(value, root, root_url);
}
dispatch("change");
dispatch("upload");
});
}
}
}
</script>
<Block
{visible}
variant={value === null ? "dashed" : "solid"}
border_mode={dragging ? "focus" : "base"}
padding={false}
{elem_id}
{elem_classes}
{container}
{scale}
{min_width}
>
<StatusTracker
{...loading_status}
status={pending_upload
? "generating"
: loading_status?.status || "complete"}
/>
<File on:select {selectable} value={_value} {label} {show_label} {height} />
</Block>