01 Inline dropzone — three states product implementation · Dropzone.tsx · react-dropzone
Dashed-border dropzone for embedded upload contexts (settings → upload avatar, new transfer modal). Idle → neutral. Drag accept → yellow border + tinted bg. Drag reject → red border + tinted bg. Always shows the "or select" link as a click target.
Drag and drop, or select files
Any file type, up to 100 GB each. Browse…
Drop to upload
3 files · 4.8 GB
Can't upload that
Files larger than 100 GB aren't supported. Try a magnet link instead.
Paste a magnet or URL
Drag a torrent file, or paste a link with ⌘V.
02 Full-screen overlay — drag-anywhere
Triggered when the user drags files anywhere in the app, not just over a dropzone. Yellow-tinted scrim with a 3px dashed border, big cloud glyph centered. The underlying UI dims but stays visible through the backdrop blur.
Drop anywhere to upload
Files land in /Films/2024/Q1
03 Upload progress — after drop
Once the upload starts, the dropzone collapses into a list of rows. Each row shows file glyph, name, progress bar, percent / rate, and a cancel button. Completed rows turn green; failed turn red and keep their cancel as a "remove" affordance.
Dune.Part.Two.2024.1080p.WEB-DL.x264-GROUP.mkv
2.18 GB · 18 MB/s
tears_of_steel-poster.jpg
DONE
archive-2024.zip
FAILED · TIMEOUT