mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-27 01:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

File component: list multiple files and allow for download #1446 (#1681)

Browse Source 
* fix multiple files

* display multiple files

* support display of multiple files

* fix multiple file output display

* format

* revert pnpm-lock.yaml

* fixes
This commit is contained in:
Dawood Khan 2022-07-17 11:59:20 +01:00 committed by GitHub
parent 9b9477abd8
commit dc8dd5e1be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 85 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
gradio/components.py
View File

@ -2335,7 +2335,10 @@ class File(Changeable, Clearable, IOComponent):
else:
return process_single_file(x)
else:
return [process_single_file(f) for f in x]
if isinstance(x, list):
return [process_single_file(f) for f in x]
else:
return process_single_file(x)
def save_flagged(self, dir, label, data, encryption_key):
"""

2
ui/packages/app/src/components/File/File.svelte
View File

@ -53,6 +53,6 @@
upload_text={$_("interface.click_to_upload")}
/>
{:else}
<File value={_value} {label} {show_label} />
<File value={_value} {label} {show_label} {file_count} />
{/if}
</Block>

53
ui/packages/file/src/File.svelte
View File

@ -11,27 +11,52 @@
export let value: FileData | null;
export let label: string;
export let show_label: boolean;
export let file_count: string;
</script>
<BlockLabel {show_label} Icon={File} label={label || "File"} />
{#if value}
<div
class="file-preview w-full flex flex-row justify-between overflow-y-auto mt-7 dark:text-slate-200"
class="file-preview overflow-y-scroll w-full max-h-60 flex flex-col justify-between mt-7 mb-7 dark:text-slate-200"
>
<div class="file-name p-2">
{display_file_name(value)}
</div>
<div class="file-size p-2">
{display_file_size(value)}
</div>
<div class="file-size p-2 hover:underline">
<a
href={download_files(value)}
download
class="text-indigo-600 hover:underline dark:text-indigo-300">Download</a
>
</div>
{#if Array.isArray(value)}
{#each value as file}
<div class="flex flex-row w-full justify-between">
<div class="file-name p-2">
{display_file_name(file)}
</div>
<div class="file-size p-2">
{display_file_size(file)}
</div>
<div class="file-size p-2 hover:underline">
<a
href={download_files(file)}
download
class="text-indigo-600 hover:underline dark:text-indigo-300"
>Download</a
>
</div>
</div>
{/each}
{:else}
<div class="flex flex-row">
<div class="file-name w-5/12 p-2">
{display_file_name(value)}
</div>
<div class="file-size w-3/12 p-2">
{display_file_size(value)}
</div>
<div class="file-size w-3/12 p-2 hover:underline">
<a
href={download_files(value)}
download
class="text-indigo-600 hover:underline dark:text-indigo-300"
>Download</a
>
</div>
</div>
{/if}
</div>
{:else}
<div class="h-full min-h-[15rem] flex justify-center items-center">

52
ui/packages/file/src/FileUpload.svelte
View File

@ -58,21 +58,45 @@
</Upload>
{:else}
<div
class="file-preview w-full flex flex-row justify-between overflow-y-auto mt-7 dark:text-slate-200"
class="file-preview overflow-y-scroll w-full max-h-60 flex flex-col justify-between mt-7 mb-7 dark:text-slate-200"
>
<ModifyUpload on:clear={handle_clear} absolute />
<div class="file-name p-2">
{display_file_name(value)}
</div>
<div class="file-size p-2">
{display_file_size(value)}
</div>
<div class="file-size p-2 hover:underline">
<a
href={download_files(value)}
download
class="text-indigo-600 hover:underline dark:text-indigo-300">Download</a
>
</div>
{#if Array.isArray(value)}
{#each value as file}
<div class="flex flex-row w-full justify-between">
<div class="file-name w-5/12 p-2">
{display_file_name(file)}
</div>
<div class="file-size w-3/12 p-2">
{display_file_size(file)}
</div>
<div class="file-size w-3/12 p-2 hover:underline">
<a
href={download_files(file)}
download
class="text-indigo-600 hover:underline dark:text-indigo-300"
>Download</a
>
</div>
</div>
{/each}
{:else}
<div class="flex flex-row">
<div class="file-name p-2">
{display_file_name(value)}
</div>
<div class="file-size p-2">
{display_file_size(value)}
</div>
<div class="file-size p-2 hover:underline">
<a
href={download_files(value)}
download
class="text-indigo-600 hover:underline dark:text-indigo-300"
>Download</a
>
</div>
</div>
{/if}
</div>
{/if}

22
ui/packages/file/src/utils.ts
View File

@ -15,34 +15,18 @@ export const display_file_name = (
value: FileData | Array<FileData>
): string => {
var str: string;
if (Array.isArray(value)) {
if (value.length > 1) {
return value.length + " files";
} else {
str = value[0].name;
}
} else {
str = value.name;
}
str = value.name;
if (str.length > 30) {
return `${str.substr(0, 30)}...`;
} else return str;
};
export const download_files = (value: FileData | Array<FileData>): string => {
return Array.isArray(value) ? value[0].data : value.data;
return value.data;
};
export const display_file_size = (
value: FileData | Array<FileData>
): string => {
var total_size = 0;
if (Array.isArray(value)) {
for (var file of value) {
total_size += file.size;
}
} else {
total_size = value.size;
}
return prettyBytes(total_size || 0);
return prettyBytes(value.size || 0);
};