SayUI
← Library→ Turn this into a prompt
Input & controls

Upload / File Picker

Pick local files and send them to the server—select, preview, progress, and retry as one flow.

Also known as file upload · dropzone · file picker

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Upload / File Picker".

Build a file upload with a dropzone that is also clickable and keyboard-operable (visually hidden but focusable <input type="file">, dropzone as its label). Handle idle, dragover, selected, uploading with per-file progress, success, failure with retry, and validation reject with a reason. Validate type and size before upload.

Anatomy:
- dropzone: The dashed target region—must also be clickable.
- file list: Selected files with remove and retry.
- upload progress: Per-file progress for multi-file uploads.
- thumbnail / preview: Image previews where the type allows it.

Preferred API / pattern: `react-dropzone / shadcn upload patterns`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Drag-only upload
  • ○Avoid: Hiding file input with display
  • ○Avoid: Silent rejects
  • ○Avoid: Failed file in a multi-upload with no retry
  • ○Avoid: No client validation

In plain wordsHow people search for it

“the dashed box I can drag files into”“the button that opens the system file picker”“that bar showing how far the upload has gotten”

AnatomyOpen for part names

dropzone
The dashed target region—must also be clickable.
file list
Selected files with remove and retry.
upload progress
Per-file progress for multi-file uploads.
thumbnail / preview
Image previews where the type allows it.

How to write itOpen for stack patterns

Web (HTML/CSS)<input type="file"> + drop events
React + Tailwind + shadcn/uireact-dropzone / shadcn upload patterns
SwiftUIfileImporter / PhotosPicker + URLSession upload
Ant Design<Upload.Dragger action fileList />

Notes

Looks simple; state machine is hard: idle, selected, uploading, success, failure-with-retry, rejected-by-validation. Drag-and-drop is enhancement—keyboard and mobile need a real clickable file input. Hide the input visually without display: none so it stays focusable. Validate type and size client-side and say why a file was rejected.

Common mistakesHumans and models trip here

  • Drag-only upload: keyboard and many mobile users cannot upload—click is the baseline.
  • Hiding file input with display: none: it becomes unfocusable—use clipping/position hide instead.
  • Silent rejects: user thinks it is broken—say “over 10MB” or “JPG/PNG only”.
  • Failed file in a multi-upload with no retry: forces redoing the whole batch.
  • No client validation: user waits minutes for a 500MB reject from the server.

More failure symptoms on AI broke it.

Related patterns

Progress Bar / IndicatorA determinate (or sometimes indeterminate) bar showing how far a task has gone.Form FieldOne complete input unit: label, control, placeholder, helper text, and error message.Empty StateA deliberate screen when a list or view has no items—guidance, not a blank void.

Spotted a wrong name or missing pattern?

Message on X