Skip to content

feat: track upload progress in attachment preview components#3060

Open
szuperaz wants to merge 5 commits intomasterfrom
file-upload-on-progress
Open

feat: track upload progress in attachment preview components#3060
szuperaz wants to merge 5 commits intomasterfrom
file-upload-on-progress

Conversation

@szuperaz
Copy link
Contributor

@szuperaz szuperaz commented Mar 25, 2026

🎯 Goal

https://linear.app/stream/issue/REACT-925/upload-progress-tracking

Depends on: https://github.com/GetStream/stream-chat-js/pull/1708/changes#diff-61c3f170c2f20982af303989006c8317adf3006784ed2b37513e1c50487353d0

🛠 Implementation details

  • New component: ProgressIndicator -> displays a circular progress indicator to track progress from 0 - 100%
  • New component: AttachmentUploadProgressIndicator -> if upload progress is available, it displays ProgressIndicator, otherwise the LoadingIndicator. When is upload progress not available?
    • It's possible that axios can't retrieve upload progress info
    • If someone uses custom CDN uploads, they may not be able to/want to provide progress tracking
  • New component: AttachmentUploadedSizeIndicatorProps to display file size:
    • During upload: 4 MB / 24 MB
    • After upload finished: 24 MB

🎨 UI Changes

Implementing this design: https://www.figma.com/design/Us73erK1xFNcB5EH3hyq6Y/Chat-SDK-Design-System?node-id=3517-102932&t=fizGA6SsyGt3g08F-0

Screenshot 2026-03-25 at 13 51 12 Screenshot 2026-03-25 at 16 01 36

@szuperaz szuperaz force-pushed the file-upload-on-progress branch from 1c15431 to 6c93b9b Compare March 25, 2026 15:14
@szuperaz szuperaz force-pushed the file-upload-on-progress branch from 6c93b9b to 50c8b11 Compare March 25, 2026 15:19
@szuperaz szuperaz marked this pull request as ready for review March 26, 2026 09:59
@szuperaz szuperaz force-pushed the file-upload-on-progress branch from 066dbb6 to d281040 Compare March 26, 2026 14:54
@szuperaz szuperaz force-pushed the file-upload-on-progress branch from d281040 to 9c79553 Compare March 26, 2026 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants