Attachment Component

Overview

Attachment shows selected files as cards with thumbnails, file details, upload progress, and contextual actions. New files animate in, progress rolls and shimmers while uploading, and failed uploads shake and offer a retry. Users can reorder items by dragging, open larger previews, and remove files while neighbouring cards slide smoothly into place.

Use it when files are central to a task, such as onboarding, project submissions, design reviews, and support requests, where users need to see what they attached and whether each file is ready.

Theme and Interaction Customisation

Choose image thumbnails, document chips, or note cards, and set groups to wrap or stay in one row. Motion options include animated entry and exit, stagger, fly-in from the drop position, an animated dropzone border, rolling percentages, shimmer text, tracing borders, progress fills, error shake, hover zoom, scroll tilt, and drag reordering.

Example Production Use Case

An agency onboarding portal can collect brand assets, references, and documents in one place. Clients drag files in, watch each card show its progress, and retry any failure without restarting the whole submission.

A creative review tool can display reference images as thumbnails that reviewers expand, reorder into the sequence they should be discussed, and annotate with short notes.

A support platform can let customers attach screenshots and logs to a ticket, with clear error states when a file is too large or fails to upload.

Best Used For

• Project submissions with design files, references, and documents.
• Customer onboarding that tracks required materials.
• Content management systems organising assets before publishing.
• Creative review workflows with reorderable image previews.
• Customer support platforms collecting screenshots, recordings, and logs.
• Collaboration tools attaching files and notes to tasks.
• Messaging applications showing file previews in conversations.
• Document-heavy SaaS products with several uploads per workflow.

Not For

For a single straightforward file, a native file input is simpler when previews and upload states aren’t needed.

It isn’t a digital asset manager. Large libraries with folders, search, tagging, permissions, and version history need a dedicated system.

A visible card doesn’t mean a file is stored securely, and very large or long transfers may need a dedicated upload manager with pause, resume, and queues.

Performance Budget

Keep entrances, hover effects, and layout transitions light, and scope progress updates to the affected card. Avoid decoding full-size images for thumbnails, release preview URLs when they are no longer needed, and stop shimmer, tilt, and tracing once they no longer apply.

Accessibility and Mobile

Use a labelled file input, name each action’s target (“Remove project-brief.pdf”), and announce progress and errors without reading out every percentage. Hover-revealed actions must work on keyboard focus, and reordering needs a keyboard alternative to dragging. On mobile, keep filenames and controls visible with comfortable tap targets, and with reduced motion simplify entrances, shake, tilt, and zoom.

Common Mistakes

• Treating a local preview as a successful upload.
• Showing simulated progress as real progress.
• Losing file identity and state during reordering.
• Applying progress or image effects outside their supported states.
• Removing failed attachments automatically instead of offering a retry.
• Forgetting to clean up temporary preview URLs.
• Making remove, preview, and retry actions hover-only.
• Relying only on drag gestures for ordering.
• Skipping server-side file validation.