File size: 2,029 Bytes
0bd62e5 |
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 |
<script lang="ts">
import { createEventDispatcher, tick } from "svelte";
import { Upload, ModifyUpload } from "@gradio/upload";
import type { FileData, Client } from "@gradio/client";
import { BlockLabel } from "@gradio/atoms";
import { File } from "@gradio/icons";
import FilePreview from "./FilePreview.svelte";
import type { I18nFormatter } from "@gradio/utils";
export let value: null | FileData | FileData[];
export let label: string;
export let show_label = true;
export let file_count: "single" | "multiple" | "directory" = "single";
export let file_types: string[] | null = null;
export let selectable = false;
export let root: string;
export let height: number | undefined = undefined;
export let i18n: I18nFormatter;
export let max_file_size: number | null = null;
export let upload: Client["upload"];
export let stream_handler: Client["stream"];
async function handle_upload({
detail
}: CustomEvent<FileData | FileData[]>): Promise<void> {
value = detail;
await tick();
dispatch("change", value);
dispatch("upload", detail);
}
function handle_clear(): void {
value = null;
dispatch("change", null);
dispatch("clear");
}
const dispatch = createEventDispatcher<{
change: FileData[] | FileData | null;
clear: undefined;
drag: boolean;
upload: FileData[] | FileData;
load: FileData[] | FileData;
error: string;
}>();
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}
|