Recipe

File picker + drag-drop UX

A polished upload zone with drag-and-drop, click-to-browse, file preview, and validation feedback — no runtime dependencies.

Ingredients

  • Hidden <input type="file">
  • Drag-over state with Tailwind ring utilities
  • FileList iteration for name + size preview
  • Accept + multiple attributes for constraints

The zone

Click to browse or drag files here

PNG, JPG, or PDF up to 10 MB each

Preview list

IMG

screenshot-2026.png

2.4 MB

Ready
PDF

invoice-q3.pdf

1.1 MB

Too large

States to handle

Idle

Dashed border, muted violet

Drag over

Pink ring, scale(1.01)

Files selected

Preview list replaces zone

Edge cases

  • Drag-leave fires on children — track counter, not boolean
  • Duplicate filenames — append (1), (2) in UI only
  • Zero-byte files — flag as invalid, don't reject silently
  • Mobile — no drag events; rely on click-to-browse
← Back to docs