Form

FileUpload

File picker with a drag-and-drop zone, keyboard activation, per-file size validation and a removable file list.

Import

import { FileUpload } from "@zephora/react";

Examples

Basic

Click, press Enter, or drop a file onto the zone.

Drop files here or click to browse

<FileUpload onFilesChange={(files) => console.log(files)} />

Multiple images with size limit

Files above `maxSize` stay in the list but are flagged with an error and excluded from `onFilesChange`.

Drop images here (max 1 MB each)

Accepted: none

const [names, setNames] = React.useState<string[]>([]);

<FileUpload
  accept="image/*"
  multiple
  maxSize={1024 * 1024}
  onFilesChange={(files) => setNames(files.map((f) => f.name))}
>
  Drop images here (max 1 MB each)
</FileUpload>
<p>Accepted: {names.join(", ") || "none"}</p>

Disabled

Uploads are disabled

<FileUpload disabled>Uploads are disabled</FileUpload>

API

FileUpload props

Prop	Type	Default	Description
`accept`	`string`	—	Accepted file types, forwarded to the hidden input (e.g. "image/*").
`multiple`	`boolean`	`false`	Allows picking several files; new files are appended.
`maxSize`	`number`	—	Maximum file size in bytes; larger files are flagged with an error.
`onFilesChange`	`(files: File[]) => void`	—	Called with the accepted (non-errored) files after every change.
`disabled`	`boolean`	`false`	Disables the dropzone.
`children`	`ReactNode`	—	Custom trigger content rendered inside the dropzone.
`aria-label`	`string`	`"Upload files"`	Accessible name for the dropzone.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	Forwarded to the root wrapper element.

Keyboard

Key	Action
`Enter / Space`	Opens the file picker from the focused dropzone.
`Tab`	Moves focus between the dropzone and the remove buttons.