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
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
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
165 changes: 103 additions & 62 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,96 @@
<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'}
<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">
<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"
<Stack direction="row" gap="xxs" inline>
{#if file?.status === 'success'}
<Button variant="text" icon size="s">
<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 hasProgress}
<Text
color="--fgcolor-neutral-tertiary"
variant="m-400"
>
{file.progress}%
Comment thread
greptile-apps[bot] marked this conversation as resolved.
Outdated
</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={file?.status === 'failed'}
Comment thread
greptile-apps[bot] marked this conversation as resolved.
Outdated
>
<div
class="upload-progress-bar-fill"
style="width: {Math.min(Math.max(file.progress ?? 0, 0), 100)}%"
/>
</div>
{/if}
</Stack>
</section>
{/each}
Expand Down Expand Up @@ -171,4 +193,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-information, hsl(220 80% 55%));
transition: width 0.3s ease;
Comment thread
greptile-apps[bot] marked this conversation as resolved.
Outdated
}

&.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