Dropzone

Status: built 2026-10-21, ready for dev 2026-10-21 (HANDOFF.md).

Problem

The designer needs a compact area for adding files by dragging them in or by browsing, like the reference: a dashed outline with an upload icon and the line "Drop an image or brief, or browse". PDS has the File Upload, a form field with a "Choose file" button that shows the chosen file name, but no drag and drop and no compact drop area. The Chat Panel and Chat Input accept drops over the whole panel or field, but have no visible area to drop on.

Proposal

A net-new component, Dropzone:

• a dashed rounded outline holding an upload icon and one line of text, with the second half of the sentence, "browse", as a real button that opens the file dialog;
• states: default, drag over (a solid highlighted outline), focus (on the browse button) and disabled;
• onFilesDrop(files) gets the files from a drop or from the file dialog; accept and multiple work as on a file input (a drop is filtered by accept);
• the text is two required props (label, browseLabel) so each half can be translated.

Out of scope for now

What happens to the files (the screen owns the list, previews and errors), a file size limit, a validation or error state, and upload progress.

Source

The designer's reference image (2026-10-21). No Figma or Jira.