mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-02-17 11:29:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix file upload issues

Browse Source
This commit is contained in:
Ali Abid 2022-02-22 21:53:28 -08:00
parent 7e6eba5997
commit 2879558c12
3 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
demo/zip_two_files/tmp.zip
View File

Binary file not shown.

21
ui/packages/app/src/components/input/File/File.svelte
View File

@ -5,24 +5,25 @@
import { prettyBytes } from "../../utils/helpers";
import { _ } from "svelte-i18n";
export let value: null | FileData;
export let value: null | FileData | Array<FileData>;
export let setValue: (
val: Array<string | FileData> | string | FileData | null
) => Array<string | FileData> | string | FileData | null;
export let file_count: "single" | "multiple" | "directory";
export let theme: string;
export let static_src: string;
</script>
<div class="input-file" {theme}>
{#if value === null}
<Upload load={setValue} {theme}>
<Upload load={setValue} {theme} {file_count}>
{$_("interface.drop_file")}
<br />- {$_("interface.or")} -<br />
{$_("interface.click_to_upload")}
</Upload>
{:else}
<div
class="file-preview w-full flex flex-row flex-wrap justify-center items-center relative"
class="file-preview w-full flex flex-row flex-wrap justify-center items-center relative overflow-y-auto"
>
<ModifyUpload clear={() => setValue(null)} {theme} {static_src} />
@ -40,10 +41,18 @@
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
<div class="file-name w-3/5 text-4xl p-6 break-all">{value.name}</div>
<div class="file-size text-2xl p-2">
{prettyBytes(value.size)}
<div class="file-name w-3/5 text-4xl p-6 break-all">
{#if value instanceof Array}
{value.length} file{#if value.length > 1}s{/if}.
{:else}
{value.name}
{/if}
</div>
{#if file_count === "single" && "size" in value}
<div class="file-size text-2xl p-2">
{prettyBytes(value.size)}
</div>
{/if}
</div>
{/if}
</div>

9
ui/packages/app/src/components/utils/Upload.svelte
View File

@ -11,7 +11,7 @@
) => Array<string | FileData> | string | FileData | null;
export let filetype: string | undefined = undefined;
export let theme: string;
export let single_file: boolean = true;
export let file_count: "single" | "multiple" | "directory" = "single";
export let include_file_metadata = true;
let hidden_upload: HTMLInputElement;
let dragging = false;
@ -29,7 +29,7 @@
if (!files.length || !window.FileReader) {
return;
}
if (single_file) {
if (file_count === "single") {
_files = [files[0]];
}
var all_file_data: Array<FileData | string> = [];
@ -46,7 +46,7 @@
}
: (this.result as string);
if (all_file_data.length === files.length) {
load(single_file ? all_file_data[0] : all_file_data);
load(file_count === "single" ? all_file_data[0] : all_file_data);
}
};
});
@ -89,6 +89,9 @@
bind:this={hidden_upload}
on:change={loadFilesFromUpload}
accept={filetype}
multiple={file_count === "multiple" || undefined}
webkitdirectory={file_count === "directory" || undefined}
mozdirectory={file_count === "directory" || undefined}
/>
</div>