Dropzone

Overview

File Upload Dropzone is the drag and drop surface that starts every upload flow. It accepts files dragged from the desktop or picked through the Choose File button, with four states covering resting, dragging, error, and disabled and three sizes that scale from hero upload areas down to compact inline drop strips. Accepted file types and the size limit live in the component copy itself, so users see the rules before a file is ever dropped.

When should you use them?

Use a file upload dropzone as the first step of any upload flow, from a single profile picture to multi-file batch uploads. It fits wherever users bring their own files into the product and pairs naturally with File Upload Row, which tracks each accepted file afterwards. Reach for a plain button with a native file picker when drag and drop adds no value, like a single small attachment in a dense form.

How should you use them?

• Use it as the entry point of the upload flow, then hand each accepted file to a File Upload Row for per-file tracking.
• Match the size to the surface: LG for hero upload areas, MD for standard forms, SM for compact inline drop strips.
• State the accepted file types and size limit in the resting copy, so constraints are clear before users drop anything.
• Rely on the Dragging state for live feedback. The file chip preview confirms the drop will register.
• Keep the Choose File button visible in every size as the fallback for touch devices and users who prefer browsing.
• Expose Choose File as a real, keyboard-focusable button and announce validation errors through an aria-live region, so screen reader users hear rejections without hunting for them.