-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
UploadButton.svelte
75 lines (69 loc) 路 1.95 KB
/
UploadButton.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
<script lang="ts">
import { createEventDispatcher, tick } from "svelte";
import type { FileData } from "@gradio/upload";
import { UploadButton } from "@gradio/upload-button";
import { upload_files } from "@gradio/client";
import { blobToBase64 } from "@gradio/upload";
import { _ } from "svelte-i18n";
export let elem_id: string = "";
export let elem_classes: Array<string> = [];
export let visible: boolean = true;
export let label: string;
export let value: null | FileData;
export let file_count: string;
export let file_types: Array<string> = ["file"];
export let root: string;
export let size: "sm" | "lg" = "lg";
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let mode: "static" | "dynamic" = "dynamic";
export let variant: "primary" | "secondary" | "stop" = "secondary";
async function handle_upload({ detail }: CustomEvent<FileData>) {
value = detail;
await tick();
let files = (Array.isArray(detail) ? detail : [detail]).map(
(file_data) => file_data.blob!
);
upload_files(root, files).then(async (response) => {
if (response.error) {
(Array.isArray(detail) ? detail : [detail]).forEach(
async (file_data, i) => {
file_data.data = await blobToBase64(file_data.blob!);
file_data.blob = undefined;
}
);
} else {
(Array.isArray(detail) ? detail : [detail]).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;
}
});
}
dispatch("change", value);
dispatch("upload", detail);
});
}
const dispatch = createEventDispatcher<{
change: FileData | null;
upload: FileData;
}>();
</script>
<UploadButton
{elem_id}
{elem_classes}
{visible}
{file_count}
{file_types}
{size}
{scale}
{min_width}
{mode}
{variant}
on:click
on:load={handle_upload}
>
{$_(label)}
</UploadButton>