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

Display pending file in <Upload /> while waiting for upload request (#6969)

Browse Source 
* show file to be uploaded before request begins

* add changeset

* tweak

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Hannah 2024-01-08 17:36:41 +01:00 committed by GitHub
parent 8dfabee004
commit 793bf8f7b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/empty-bags-type.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/upload": patch
"gradio": patch
---
fix:Display pending file in `<Upload />` while waiting for upload request

11
js/upload/src/UploadProgress.svelte
View File

@ -11,6 +11,7 @@
let event_source: EventSource; let event_source: EventSource;
let progress = false; let progress = false;
let current_file_upload: FileDataWithProgress; let current_file_upload: FileDataWithProgress;
let file_to_display: FileDataWithProgress;
let files_with_progress: FileDataWithProgress[] = files.map((file) => { let files_with_progress: FileDataWithProgress[] = files.map((file) => {
return { return {
@ -68,6 +69,8 @@
} }
$: calculateTotalProgress(files_with_progress); $: calculateTotalProgress(files_with_progress);
$: file_to_display = current_file_upload || files_with_progress[0];
</script> </script>
<div class="wrap" class:progress> <div class="wrap" class:progress>
@ -76,19 +79,19 @@
{files_with_progress.length > 1 ? "files" : "file"}...</span {files_with_progress.length > 1 ? "files" : "file"}...</span
> >
{#if current_file_upload} {#if file_to_display}
<div class="file"> <div class="file">
<span> <span>
<div class="progress-bar"> <div class="progress-bar">
<progress <progress
style="visibility:hidden;height:0;width:0;" style="visibility:hidden;height:0;width:0;"
value={getProgress(current_file_upload)} value={getProgress(file_to_display)}
max="100">{getProgress(current_file_upload)}</progress max="100">{getProgress(file_to_display)}</progress
> >
</div> </div>
</span> </span>
<span class="file-name"> <span class="file-name">
{current_file_upload.orig_name} {file_to_display.orig_name}
</span> </span>
</div> </div>
{/if} {/if}