File Dropzone
Drag files in, watch them upload, retry the ones that fail.
IntermediateWeb appUI component10–20hAI-buildable 4/5no setup
A complete upload component: drag and drop with a real hover state, file type and size validation, per-file progress, cancel, and retry. Handling a dropped folder rather than loose files is the detail that turns a demo into a real component.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Files drop onto a zone with a clear active state
- A click fallback opens the file picker
- Type and size validation with per-file error messages
- Per-file upload progress with cancel
- Failed uploads can be retried individually
- Image files show a thumbnail preview
- Dropping a folder enumerates its files
The interesting part
- dragleave firing on child elements and clearing the active state early
- Reading a dropped directory, which uses a separate non-obvious API
- Cancelling an in-flight upload cleanly
Once it works
- Add chunked uploads for large files with resume
- Add client-side image compression before upload
- Add paste-to-upload from the clipboard
Suggested stack
reacttypescripttailwind