Skip to content

feat: add progress bar support to Upload.Box #404

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
premtsd-code merged 3 commits into from
Apr 9, 2026
+145 −61
Merged

feat: add progress bar support to Upload.Box #404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7ef15c2
feat: add progress bar support to Upload.Box component
premtsd-code Apr 7, 2026
0197e8f
fix: address linter and review feedback
premtsd-code Apr 7, 2026
8dcaa17
fix: improve progress bar accessibility, DRY, and edge cases
premtsd-code Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 106 additions & 61 deletions v2/pink-sb/src/lib/upload/Box.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
size?: number;
extension?: string;
error?: string;
progress?: number;
status?: 'failed' | 'pending' | 'success';
})[] = [];

Expand Down Expand Up @@ -67,75 +68,100 @@
<div transition:slide={{ axis: 'y', duration: 200 }}>
{#each files as file}
{@const fileSize = file?.size ? humanFileSize(file.size) : false}
{@const hasProgress = typeof file?.progress === 'number' && file.progress > 0}
{@const clampedProgress = hasProgress
? Math.round(Math.min(Math.max(file.progress ?? 0, 0), 100))
: 0}
{@const isError = !!file?.error || file?.status === 'failed'}
<section>
<Stack
direction="row"
gap="s"
justifyContent="space-between"
alignItems="center"
>
<Stack direction="row" gap="s" style="overflow: hidden;">
<Icon
icon={IconDocument}
color={file?.error
? '--fgcolor-error'
: '--fgcolor-neutral-tertiary'}
/>
<Stack direction="row" gap="xxs" inline style="min-width: 0;">
<Text truncate>
{file.name}
</Text>
{#if fileSize}
<Text color="--fgcolor-neutral-tertiary">
<span style="white-space: nowrap">
({fileSize.value}
{fileSize.unit})
</span>
<Stack direction="column" gap="xs">
<Stack
direction="row"
gap="s"
justifyContent="space-between"
alignItems="center"
>
<Stack direction="row" gap="s" style="overflow: hidden;">
<Icon
icon={IconDocument}
color={file?.error
? '--fgcolor-error'
: '--fgcolor-neutral-tertiary'}
/>
<Stack direction="row" gap="xxs" inline style="min-width: 0;">
<Text truncate>
{file.name}
</Text>
{/if}
{#if fileSize}
<Text color="--fgcolor-neutral-tertiary">
<span style="white-space: nowrap">
({fileSize.value}
{fileSize.unit})
</span>
</Text>
{/if}
</Stack>
</Stack>
</Stack>
<Stack direction="row" gap="xxs" inline>
{#if file?.status === 'success'}
<Button variant="text" icon size="s">
<Stack direction="row" gap="xxs" inline>
{#if file?.status === 'success'}
<Icon icon={IconCheck} color="--fgcolor-success" size="s" />
</Button>
{:else}
{#if file?.error}
<Stack inline justifyContent="center">
<Badge
variant="secondary"
type="error"
content="Failed"
size="s"
/>
</Stack>
{:else if file?.status === 'pending'}
<Stack inline justifyContent="center">
<Badge
variant="secondary"
type="warning"
content="Pending"
{:else}
{#if isError}
<Stack inline justifyContent="center">
<Badge
variant="secondary"
type="error"
content="Failed"
size="s"
/>
</Stack>
{:else if hasProgress}
<Text color="--fgcolor-neutral-tertiary">
{clampedProgress}%
</Text>
{:else if file?.status === 'pending'}
<Stack inline justifyContent="center">
<Badge
variant="secondary"
type="warning"
content="Pending"
size="s"
/>
</Stack>
{/if}
<Button
variant="text"
icon
size="s"
on:click={() => {
dispatch('remove', file);
}}
>
<Icon
icon={IconX}
color="--fgcolor-neutral-tertiary"
size="s"
/>
</Stack>
</Button>
{/if}
<Button
variant="text"
icon
size="s"
on:click={() => {
dispatch('remove', file);
}}
>
<Icon
icon={IconX}
color="--fgcolor-neutral-tertiary"
size="s"
/>
</Button>
{/if}
</Stack>
</Stack>
{#if hasProgress && file?.status !== 'success'}
<div
class="upload-progress-bar"
class:is-error={isError}
role="progressbar"
aria-valuenow={clampedProgress}
aria-valuemin={0}
aria-valuemax={100}
aria-label="{file.name} upload progress"
>
<div
class="upload-progress-bar-fill"
style="width: {clampedProgress}%"
/>
</div>
{/if}
</Stack>
</section>
{/each}
Expand Down Expand Up @@ -171,4 +197,23 @@
flex-shrink: 1;
}
}

.upload-progress-bar {
height: 4px;
width: 100%;
border-radius: var(--border-radius-XS, 4px);
background: var(--bgcolor-neutral-secondary, hsl(0 0% 90%));
overflow: hidden;

&-fill {
height: 100%;
border-radius: inherit;
background: var(--bgcolor-accent);
transition: width 0.3s ease;
}

&.is-error &-fill {
background: var(--bgcolor-error, hsl(0 70% 55%));
}
}
</style>
39 changes: 39 additions & 0 deletions v2/pink-sb/src/stories/upload/Box.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,38 @@
status: 'pending'
}
];

let filesWithProgress = [
{
name: 'uploading-file.png',
extension: 'png',
size: 15728640,
status: 'pending',
progress: 45
},
{
name: 'almost-done.pdf',
extension: 'pdf',
size: 8388608,
status: 'pending',
progress: 92
},
{
name: 'completed-file.jpg',
extension: 'jpg',
size: 41024,
status: 'success',
progress: 100
},
{
name: 'failed-upload.zip',
extension: 'zip',
size: 52428800,
status: 'failed',
error: 'File exceeds size limit',
progress: 60
}
];
</script>

<script>
Expand All @@ -44,3 +76,10 @@
files
}}
/>

<Story
name="With Progress"
args={{
files: filesWithProgress
}}
/>
Loading