File Upload

Overview

File Upload Row is the compact horizontal tracker shown during and after a file upload. It surfaces the file name, size, progress, and current state in a single line, with five states covering the full upload lifecycle and per-state actions that appear contextually, so it works well for upload queues, recently uploaded lists, and anywhere multiple files are tracked side by side.

When should you use them?

Use a file upload row to track individual files during and after upload, especially when several files need to be shown side by side, like an upload queue or a recently uploaded list. Reach for a larger drop zone or standalone file card when a single file needs a more prominent, focal treatment.

How should you use them?

• Use a file upload row to track each file's name, size, progress, and state in a compact line.
• Use it in queues and lists where multiple files are tracked side by side.
• Let the state drive the row: uploading, queued, paused, completed, or error.
• Show only the actions that fit the current state, so the row stays calm and uncluttered.
• Give the error state a clear message and a retry action so failures are recoverable.
• Announce progress and state changes so screen readers know when an upload completes or fails.