Skip to content
uiify

Framework

Next.jsTanStack StartAstroVike

Style

CSSTailwind

Theme

Language

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

File upload

Drop zone + file list.

Browsers
Chrome 123+Firefox 121+Safari 17.5+
Tier
1
Bundle compressed
2.27 kB
Forced layout budget
0 ms
Axe budget
0
SSR compatible
Yes
Published contract
Test harness

Playground

File upload

Attachments

Drop files here, or choose files above.

    Up to 3 files · 5 MB each

    API

    FileUpload.Root

    PropTypeDefaultDescription
    childrenReactNode—File upload parts: hidden input, trigger, dropzone and list.
    valuereadonly File[]—Current files, making the component controlled.
    defaultValuereadonly File[][]Starting files for the uncontrolled component.
    onValueChange(files: File[]) => void—Called with the accepted files whenever the selection changes.
    onReject(rejections: FileRejection[]) => void—Called with the files that failed validation and why.
    acceptstring[][]Accepted file types, as extensions or MIME types.
    maxFilesnumber—Largest number of files that can be held at once.
    maxSizenumber—Largest accepted file size in bytes.
    minSizenumber—Smallest accepted file size in bytes.
    multiplebooleanfalseLets the picker select more than one file.
    disabledbooleanfalseDisables the picker, the dropzone and the remove buttons.

    FileUpload.HiddenInput

    PropTypeDefaultDescription
    classNamestring—Class applied to the native file input.

    FileUpload.Trigger

    PropTypeDefaultDescription
    childrenReactNode—Content of the control that opens the file picker.
    classNamestring—Class applied to the trigger element.
    renderReactElement | ((props, state) => ReactElement)—Replace the rendered element while keeping behavior and accessibility wiring.

    FileUpload.Dropzone

    PropTypeDefaultDescription
    childrenReactNode—Content of the drop target.
    classNamestring—Class applied to the dropzone element.
    renderReactElement | ((props, state) => ReactElement)—Replace the rendered element while keeping behavior and accessibility wiring.

    FileUpload.List

    PropTypeDefaultDescription
    childrenReactNode | ((files: readonly File[]) => ReactNode)—Render accepted files from the live list. Controlled value changes and external resets are reflected immediately.
    classNamestring—Class applied to the list element.

    FileUpload.Item

    PropTypeDefaultDescription
    childrenReactNode—Content describing the file, such as its name and size.
    classNamestring—Class applied to the item element.
    index*number—Position of the file this item represents.
    renderReactElement | ((props, state) => ReactElement)—Replace the rendered element while keeping behavior and accessibility wiring.

    FileUpload.ItemRemove

    PropTypeDefaultDescription
    classNamestring—Class applied to the remove button.
    index*number—Position of the file this button removes.

    FileRejection

    PropTypeDefaultDescription
    file*File—The file that was not accepted.
    reason*"accept" | "max-size" | "max-files"—Which rule the file failed.

    Keyboard

    KeyAction
    Enter / SpaceOpen the file picker from Trigger or remove a focused file
    TabMove between the picker trigger and file removal controls

    Accessibility

    Give HiddenInput an accessible label. List receives the accepted files and renders their names, sizes and labeled removal buttons. Root supports controlled value, cumulative maxFiles, maxSize and accept validation; onReject reports rejected files. Disabled roots block picker, drop and removal actions. File handling requires hydration.

    Styling hooks

    data-uiify-file-uploaddata-partdata-disableddata-state