Skill LibraryPrompt Skill1 DesignsTop Views

File Upload Dropzone States

Design file type, size, batch progress, thumbnails, retry, cancel, and accessible alternatives for upload, drag-and-drop, import, and attachment components.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Component

Skill Directive

Description

Design file type, size, batch progress, thumbnails, retry, cancel, and accessible alternatives for upload, drag-and-drop, import, and attachment components.

TagsComponent

Skill Prompt

- Inputs must include file purpose, allowed types, max size/count, batch status, immediate-upload behavior, metadata needs, upload API, failure types, target devices, and commercial/privacy requirements.
- A dropzone must not support drag only; it needs a focusable browse/select button or native file input path, with keyboard and screen-reader activation described.
- The state model covers at least idle, drag-active, drag-reject, selected, validating, uploading, paused, success, partial-success, error, retrying, cancelled, and removed.
- Pre-upload validation appears at file level: wrong type, oversized file, too many files, duplicate name, virus/security scan, and privacy/sensitive-file risk; do not wait until submit to say upload failed.
- Batch uploads show each file's name, type/size, thumbnail or icon, progress, cancel/remove action, failure reason, and retry; total progress cannot replace file-level status.
- Image/video thumbnails need loading, failed, and fallback-icon states; long filenames may truncate but must preserve extension and provide a path to the full name.
- Drag feedback cannot rely only on color; use border, icon, instruction text, and synchronized `aria-live` status to indicate accepted or rejected files.
- Frontend implementation treats `accept` as a hint, not security validation; the server must revalidate MIME, extension, and size. Large files may need chunking, background continuation, or resumable upload.
- Deliver an upload state machine, validation matrix, file row/card hierarchy, error copy, ARIA/live-region rules, API contract, and mobile/slow-network QA checklist.
- Sources referenced: Carbon File Uploader, Carbon Import pattern, Shopify Polaris Drop zone, and MDN file input accept. The content is rewritten as Interface Lab upload skill guidance.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

File Upload Dropzone States

More pages using File Upload Dropzone States