FileUpload

An unstyled file upload component with drag-and-drop, validation, and progress tracking.

Build fully custom file uploaders with complete control over layout, file lists, and drag-and-drop zones.

Drag and drop files here to upload.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use FileUpload with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Trigger, Upload, Clear, Content, ItemGroup, Item, ItemPreview, ItemInfo, ItemName, ItemSize, ItemRemove
Self-wired action components, Trigger (open dialog), Upload, Clear and ItemRemove read the context and need no manual handlers
Built-in file type, size and limit validation surfaced through the onError / onChange callbacks
Drag-and-drop file selection with visual highlight feedback
XMLHttpRequest-based upload with progress tracking
Custom upload handler support for client-side file processing
Separate tracking of pending and uploaded files
Composable file item rendering with Item context providing file data to nested sub-components

Usage#

import { FileUpload } from 'primereact/fileupload';

<FileUpload.Root>
    <FileUpload.Trigger>Choose</FileUpload.Trigger>
    <FileUpload.Upload>Upload</FileUpload.Upload>
    <FileUpload.Clear>Clear</FileUpload.Clear>
    <FileUpload.Content>
        <FileUpload.ItemGroup>
            <FileUpload.Item file={file} index={index}>
                <FileUpload.ItemPreview />
                <FileUpload.ItemInfo>
                    <FileUpload.ItemName />
                    <FileUpload.ItemSize />
                </FileUpload.ItemInfo>
                <FileUpload.ItemRemove />
            </FileUpload.Item>
        </FileUpload.ItemGroup>
    </FileUpload.Content>
</FileUpload.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<FileUpload.Root as="section">
    <FileUpload.Content as="main"></FileUpload.Content>
</FileUpload.Root>

Default elements: Root=div, Trigger=button, Upload=button, Clear=button, Content=div, ItemGroup=div, Item=div, ItemPreview=img, ItemInfo=div, ItemName=div, ItemSize=div, ItemRemove=button.

Render Function Children#

Root accepts a render function as children, providing access to the component instance with state, methods, and computed properties.

<FileUpload.Root>
    {(instance) => (
        <>
            <FileUpload.Trigger>Choose Files</FileUpload.Trigger>
            <FileUpload.Upload>Upload</FileUpload.Upload>
            <FileUpload.Content>
                <FileUpload.ItemGroup>
                    {instance.state.files.map((file, index) => (
                        <FileUpload.Item key={file.name + file.size} file={file} index={index}>
                            <FileUpload.ItemPreview />
                            <FileUpload.ItemInfo>
                                <FileUpload.ItemName />
                                <FileUpload.ItemSize />
                            </FileUpload.ItemInfo>
                            <FileUpload.ItemRemove>Remove</FileUpload.ItemRemove>
                        </FileUpload.Item>
                    ))}
                </FileUpload.ItemGroup>
            </FileUpload.Content>
        </>
    )}
</FileUpload.Root>

Pass Through#

The component's PT demo referenced as fileupload-pt is unavailable or does not exist.

API#

FileUploadRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadRootInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadRootInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`name`	`string`	—
Name of the request parameter to identify the files at backend.
`url`	`string`	—
Remote url to upload the files.
`multiple`	`boolean`	`false`
Used to select multiple files at once from file dialog.
`accept`	`string`	—
Pattern to restrict the allowed file types such as "image/*".
`disabled`	`boolean`	`false`
When present, it specifies that the element should be disabled.
`auto`	`boolean`	`false`
When enabled, upload begins automatically after selection is completed.
`maxFileSize`	`number`	—
Maximum file size allowed in bytes.
`fileLimit`	`number`	—
Maximum number of files that can be uploaded.
`withCredentials`	`boolean`	`false`
Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
`customUpload`	`boolean`	`false`
Whether to use the default upload or a manual implementation defined in uploadHandler callback.
`invalidFileLimitMessage`	`string`	`'Maximum number of files exceeded, limit is {0} at most.'`
Message to display when number of files to be uploaded exceeds the limit.
`invalidFileSizeMessage`	`string`	`'{0}: Invalid file size, file size should be smaller than {1}.'`
Message to display when file size exceeds the limit.
`invalidFileTypeMessage`	`string`	`'{0}: Invalid file type, allowed file types: {1}.'`
Message to display when file type is not allowed.
`uploadHandler`	`(event: UseFileUploadHandlerEvent) => void`	—
Callback to invoke to implement a custom upload.
`onSelect`	`(event: UseFileUploadSelectEvent) => void`	—
Callback to invoke when files are selected.
`onChange`	`(event: UseFileUploadChangeEvent) => void`	—
Callback to invoke whenever the selected (pending) file set changes — on select, remove and clear. Carries the current accepted files and any files rejected by validation, so message/UI state can be synced in one place.
`onBeforeUpload`	`(event: UseFileUploadBeforeUploadEvent) => void`	—
Callback to invoke before file upload begins to customize the request such as post parameters before the files.
`onUpload`	`(event: UseFileUploadUploadEvent) => void`	—
Callback to invoke when file upload is complete.
`onError`	`(event: UseFileUploadErrorEvent) => void`	—
Callback to invoke when a client-side validation fails (invalid type/size/limit) or an upload fails. Discriminate via `event.type` .
`onProgress`	`(event: UseFileUploadProgressEvent) => void`	—
Callback to invoke on upload progress.
`onBeforeSend`	`(event: UseFileUploadBeforeSendEvent) => void`	—
Callback to invoke before send for customization such as adding headers.
`onClear`	`() => void`	—
Callback to invoke when files in queue are removed without uploading.
`onRemove`	`(event: UseFileUploadRemoveEvent) => void`	—
Callback to invoke when a file is removed.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUpload component.

label	type	description
root	FileUploadRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
content	FileUploadRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.
fileList	FileUploadRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the file list's DOM element.
file	FileUploadRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the file's DOM element.
fileThumbnail	FileUploadRootPassThroughType<HTMLAttributes<HTMLImageElement>>	Used to pass attributes to the file thumbnail's DOM element.
fileInfo	FileUploadRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the file info's DOM element.
fileName	FileUploadRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the fileName's DOM element.
fileSize	FileUploadRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the fileSize's DOM element.
fileActions	FileUploadRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the file actions' DOM element.
fileRemove	FileUploadRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the file remove button's DOM element.

FileUploadTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadTriggerInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadTriggerInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadTriggerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUploadTrigger component.

label	type	description
root	FileUploadTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

FileUploadUpload#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadUploadInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadUploadInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadUploadInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadUploadPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadUploadInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUploadUpload component.

label	type	description
root	FileUploadUploadPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

FileUploadClear#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadClearInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadClearInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadClearInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadClearPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadClearInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUploadClear component.

label	type	description
root	FileUploadClearPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

FileUploadContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadContentInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadContentInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-highlight`	`"true"` when files are dragged over the zone

Defines passthrough(pt) options of FileUploadContent component.

label	type	description
root	FileUploadContentPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

FileUploadItemGroup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadItemGroupInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadItemGroupInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadItemGroupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadItemGroupPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadItemGroupInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUploadItemGroup component.

label	type	description
root	FileUploadItemGroupPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

FileUploadItem#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadItemInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadItemInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadItemInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadItemPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadItemInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`file`	`File`	—
The file object to display.
`index`	`number`	—
The index of the file in the list.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUploadItem component.

label	type	description
root	FileUploadItemPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

FileUploadItemPreview#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadItemPreviewInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadItemPreviewInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadItemPreviewInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadItemPreviewPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadItemPreviewInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUploadItemPreview component.

label	type	description
root	FileUploadItemPreviewPassThroughType<HTMLAttributes<HTMLImageElement>>	Used to pass attributes to the root's DOM element.

FileUploadItemInfo#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadItemInfoInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadItemInfoInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadItemInfoInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadItemInfoPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadItemInfoInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUploadItemInfo component.

label	type	description
root	FileUploadItemInfoPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

FileUploadItemName#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadItemNameInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadItemNameInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadItemNameInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadItemNamePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadItemNameInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUploadItemName component.

label	type	description
root	FileUploadItemNamePassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

FileUploadItemSize#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadItemSizeInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadItemSizeInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadItemSizeInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadItemSizePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadItemSizeInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUploadItemSize component.

label	type	description
root	FileUploadItemSizePassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

FileUploadItemRemove#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FileUploadItemRemoveInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FileUploadItemRemoveInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FileUploadItemRemoveInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FileUploadItemRemovePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FileUploadItemRemoveInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FileUploadItemRemove component.

label	type	description
root	FileUploadItemRemovePassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

FileUpload uses a hidden native input[type="file"] element for file selection. The choose button triggers this input programmatically. File thumbnails use role="presentation" to indicate decorative images. Error messages are rendered as visible text for screen reader announcement.

Keyboard Support#

Key	Function
`tab`	Moves focus between the choose, upload, cancel buttons and file remove buttons.
`enter` / `space`	Activates the focused button. Opens the file dialog when the choose button is focused.