FileDropZone
StableWhere people drop or browse for files, with the kinds and sizes that work said up front.
Also known as file upload, dropzone, drag and drop upload, uploader
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Add files
Add files
PDF, DOCX, CSV, PNG. Up to 25 MB.
<FileDropZone accept={["pdf", "docx", "csv", "png"]} maxSizeMb={25} onFiles={add} />Press Browse files, or drag files onto the area. A file of the wrong kind or size says why.
When to use it
Makes adding files easy and predictable, so people know what will work before they try.
Made of: Icon · Title · Kinds and size · Browse files · Errors
Use it for
- Adding files to a chat, a project or a research run.
- Uploads with limits on kind or size.
Not for
- A file already added: use AttachmentChip.
- A file the AI made: use FileResultCard.
Do and avoid
Add files
PDF, DOCX, PNG. Up to 30 MB.
Do
- Say the kinds and size limit before anyone tries.
- Name the file that did not work and say why.
- Keep Browse files for people who cannot drag.
Avoid
- Do not make dragging the only way.
- Do not reject a file without saying which one.
On a phone
- On a phone, Browse files opens the phone's own picker; dragging is rare there.
- The area fills the width and its button is a full tap target.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| onFilesrequired | (files: File[]) => void | none | Called with the files that passed the checks. |
| accept | string[] | none | Accepted extensions, such as ["pdf", "docx"]. Any file when omitted. |
| maxSizeMb | number | none | Largest file in megabytes. |
| multiple | boolean | true | Allow more than one file at a time. |
| disabled | boolean | none | Turns the area and its button off. |
| labels | FileDropZoneLabels | none | Overrides title, browse, drop, hint, wrongKind and tooBig. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one FileDropZone switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Disabled | disabled | On or off |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- resting
- A dashed area with Add files, which kinds and sizes work, and Browse files.
- dragging over
- The area takes the selected fill and border and says Drop to add.
- file refused
- A red line names each file that was refused and why; the files that passed are still added.
- disabled
- The area fades and Browse files is turned off.
- focus
- Browse files shows a focus ring on keyboard focus.
Tokens
Change one of these and every part that uses it follows.
--bg--line-strong--selected--selected-border--danger-fg--radius-card
Built in
- Browse files is a real button, described by the kinds and size line.
- Errors are read out as soon as they appear.
- The words change to Drop to add when a file is over the area, not just the color.
What you need to do
- List the kinds people actually use, not every extension.
- Check the files again on your server; this checks only names and sizes.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide