Skip to Content
DocsEnterpriseBlogShowcase

File Upload

Used to select and upload files from their device.

Ark UISourceStorybookRecipe

Setup

If you don't already have the snippet, run the following command to add the file-upload snippet

chakra snippet add file-upload

The snippet includes a closed component composition for the FileUpload component.

Usage

import {
  FileUploadList,
  FileUploadRoot,
  FileUploadTrigger,
} from "@/components/ui/file-upload"
<FileUploadRoot>
  <FileUploadTrigger>
    <Button>
      <HiUpload /> Upload file
    </Button>
  </FileUploadTrigger>
  <FileUploadList />
</FileUploadRoot>

Examples

Directory

Use the directory prop to allow selecting a directory instead of a file.

Media Capture

Use the capture prop to select and upload files from different environments and media types.

Multiple Files

Upload multiple files at once by using the maxFiles prop.

Dropzone

Drop multiple files inside the dropzone and use the maxFiles prop to set the number of files that can be uploaded at once.

Drag and drop here or

.png, .jpg up to 5MB

Accepted Files

Define the accepted files for upload using the accept prop.

Props

Root

PropDefaultType
allowDrop true
boolean

Whether to allow drag and drop in the dropzone element

locale '\'en-US\''
string

The current locale. Based on the BCP 47 definition.

maxFiles '1'
number

The maximum number of files

maxFileSize 'Infinity'
number

The maximum file size in bytes

minFileSize '0'
number

The minimum file size in bytes

accept
Record<string, string[]> | FileMimeType | FileMimeType[]

The accept file types

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
capture
'user' | 'environment'

The default camera to use when capturing media

directory
boolean

Whether to accept directories, only works in webkit browsers

disabled
boolean

Whether the file input is disabled

ids
Partial<{ root: string dropzone: string hiddenInput: string trigger: string label: string item(id: string): string itemName(id: string): string itemSizeText(id: string): string itemPreview(id: string): string }>

The ids of the elements. Useful for composition.

invalid
boolean

Whether the file input is invalid

name
string

The name of the underlying file input

onFileAccept
(details: FileAcceptDetails) => void

Function called when the file is accepted

onFileChange
(details: FileChangeDetails) => void

Function called when the value changes, whether accepted or rejected

onFileReject
(details: FileRejectDetails) => void

Function called when the file is rejected

required
boolean

Whether the file input is required

translations
IntlTranslations

The localized messages to use.

validate
(file: File) => FileError[] | null

Function to validate a file

as
React.ElementType

The underlying element to render.

unstyled
boolean

Whether to remove the component's style.