File Upload

Upload files with drag and drop support.

Installation

pnpm add @base-ui/react motion

Examples

Free, accessible React file upload components built with Base UI for drag-and-drop zones, image previews, and progress tracking.

Base

A drag and drop zone for file uploads with a dashed border and upload icon.

Click to upload or drag and dropSVG, PNG, JPG or GIF (max. 800x400px)

Solid

File upload with a solid border instead of a dashed border.

Click to upload or drag and dropSVG, PNG, JPG or GIF (max. 800x400px)

Error

File upload with a dashed border and error styling.

Click to upload or drag and dropSVG, PNG, JPG or GIF (max. 800x400px)

Solid Error

File upload with a solid border and error styling.

Click to upload or drag and dropSVG, PNG, JPG or GIF (max. 800x400px)

Disabled

Prevent user interaction using the disabled prop.

Click to upload or drag and dropSVG, PNG, JPG or GIF (max. 800x400px)