mirror of
https://github.com/gradio-app/gradio.git
synced 2025-04-12 12:40:29 +08:00
Redesign file upload (#6356)
This commit is contained in:
Hannah
GitHub
parent
294414d9f7
commit
854b482f59
6
.changeset/proud-flies-serve.md
Normal file
6
.changeset/proud-flies-serve.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@gradio/upload": patch
|
||||
"gradio": patch
|
||||
---
|
||||
|
||||
feat:Redesign file upload
|
||||
@ -45,6 +45,7 @@
|
||||
uploading = true;
|
||||
const _file_data = await upload(file_data, root, upload_id, upload_fn);
|
||||
dispatch("load", file_count === "single" ? _file_data?.[0] : _file_data);
|
||||
uploading = false;
|
||||
return _file_data || [];
|
||||
}
|
||||
|
||||
@ -98,14 +99,7 @@
|
||||
</script>
|
||||
|
||||
{#if uploading}
|
||||
<UploadProgress
|
||||
{root}
|
||||
{upload_id}
|
||||
files={file_data}
|
||||
on:done={() => {
|
||||
uploading = false;
|
||||
}}
|
||||
/>
|
||||
<UploadProgress {root} {upload_id} files={file_data} />
|
||||
{:else}
|
||||
<button
|
||||
class:hidden
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
let event_source: EventSource;
|
||||
let progress = false;
|
||||
let current_file_upload: FileDataWithProgress;
|
||||
|
||||
let files_with_progress: FileDataWithProgress[] = files.map((file) => {
|
||||
return {
|
||||
@ -46,57 +47,128 @@
|
||||
event_source.close();
|
||||
dispatch("done");
|
||||
} else {
|
||||
current_file_upload = _data;
|
||||
handleProgress(_data.orig_name, _data.chunk_size);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
function calculateTotalProgress(files: FileData[]): number {
|
||||
let totalProgress = 0;
|
||||
files.forEach((file) => {
|
||||
totalProgress += getProgress(file as FileDataWithProgress);
|
||||
});
|
||||
|
||||
document.documentElement.style.setProperty(
|
||||
"--upload-progress-width",
|
||||
(totalProgress / files.length).toFixed(2) + "%"
|
||||
);
|
||||
|
||||
return totalProgress / files.length;
|
||||
}
|
||||
|
||||
$: calculateTotalProgress(files_with_progress);
|
||||
</script>
|
||||
|
||||
<div class="wrap" class:progress>
|
||||
{#each files_with_progress as file, index}
|
||||
<div class="file-info">
|
||||
<span>Uploading {file.orig_name}...</span>
|
||||
<span class="uploading"
|
||||
>Uploading {files_with_progress.length}
|
||||
{files_with_progress.length > 1 ? "files" : "file"}...</span
|
||||
>
|
||||
|
||||
{#if current_file_upload}
|
||||
<div class="file">
|
||||
<span>
|
||||
<div class="progress-bar">
|
||||
<progress
|
||||
style="visibility:hidden;height:0;width:0;"
|
||||
value={getProgress(current_file_upload)}
|
||||
max="100">{getProgress(current_file_upload)}</progress
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{current_file_upload.orig_name}
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar" style="width: {getProgress(file)}%;"></div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrap {
|
||||
margin-top: var(--size-7);
|
||||
overflow-y: auto;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
background: var(--block-background-fill);
|
||||
}
|
||||
|
||||
.wrap.progress {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.progress-bar-wrap {
|
||||
border: 1px solid var(--border-color-primary);
|
||||
background: var(--background-fill-primary);
|
||||
height: var(--size-4);
|
||||
}
|
||||
.progress-bar {
|
||||
transform-origin: left;
|
||||
background-color: var(--loader-color);
|
||||
height: var(--size-full);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
min-height: var(--size-40);
|
||||
}
|
||||
|
||||
.file-info span {
|
||||
color: var(--body-text-color);
|
||||
font-size: var(--text-med);
|
||||
font-family: var(--font-mono);
|
||||
.wrap::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--upload-progress-width);
|
||||
height: 100%;
|
||||
transition: all 0.5s ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.uploading {
|
||||
font-size: var(--text-lg);
|
||||
font-family: var(--font);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
margin: var(--spacing-md);
|
||||
font-size: var(--text-lg);
|
||||
color: var(--body-text-color-subdued);
|
||||
}
|
||||
|
||||
.file {
|
||||
font-size: var(--text-md);
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file progress {
|
||||
display: inline;
|
||||
height: var(--size-1);
|
||||
width: 100%;
|
||||
transition: all 0.5s ease-in-out;
|
||||
color: var(--color-accent);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.file progress[value]::-webkit-progress-value {
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.file progress[value]::-webkit-progress-bar {
|
||||
background-color: var(--border-color-accent);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
closest-side,
|
||||
var(--block-background-fill) 64%,
|
||||
transparent 53% 100%
|
||||
),
|
||||
conic-gradient(
|
||||
var(--color-accent) var(--upload-progress-width),
|
||||
var(--border-color-accent) 0
|
||||
);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user