FileDropzone

Markdown

A drop target for local files with a browse button and type, size and slot checks.

Use it for
Picking local files by drop or browse, with type, size and slot checks.
Not for
Showing files already attached. Try Attachment.

FileDropzone preview

Loading example…

Installation

npm install @stackunseen/ui
import { FileDropzone } from '@stackunseen/ui';
Styles: @stackunseen/ui/styles.css

Usage and props

Dropped or chosen files stay in the browser as File objects. Your app checks what’s in them, uploads and stores them.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

onFilesSelected · onReject? · accept? · maxFileBytes? · remainingSlots? · multiple? · disabled? · label? · browseLabel? · hint?
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
onFilesSelected · onReject? · accept? · maxFileBytes? · remainingSlots? · multiple? · disabled? · label? · browseLabel? · hint?
Keeps honest
Dropped or chosen files stay in the browser as File objects. Your app checks what’s in them, uploads and stores them.
MCP
read_component "FileDropzone" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Tab reaches the browse button; Enter or Space opens the file chooser.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio