File Upload

A component that is used to upload multiple files.

Preview Component

Please note, the API of this component is currently in a preview phase and is subject to change.

    Anatomy

    To set up the file upload component correctly, you’ll need to understand its anatomy and how we name its parts.

    Each part includes a data-part attribute to help identify them in the DOM.

    Examples

    Learn how to use the FileUpload component in your project. Let’s take a look at the most basic example:

    import { FileUpload } from '@ark-ui/react'
    import { FileIcon } from 'lucide-react'
    
    const Basic = () => (
      <FileUpload.Root maxFiles={5}>
        <FileUpload.Label>File Upload</FileUpload.Label>
        <FileUpload.Dropzone>Drag your file(s) here</FileUpload.Dropzone>
        <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
        <FileUpload.ItemGroup>
          {(files) =>
            files.map((file, id) => (
              <FileUpload.Item key={id} file={file}>
                <FileUpload.ItemPreview type="image/*">
                  <FileUpload.ItemPreviewImage />
                </FileUpload.ItemPreview>
                <FileUpload.ItemPreview type=".*">
                  <FileIcon />
                </FileUpload.ItemPreview>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
                <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
              </FileUpload.Item>
            ))
          }
        </FileUpload.ItemGroup>
      </FileUpload.Root>
    )
    

    API Reference

    Root

    PropTypeDefault
    accept
    string | Record<string, string[]>
    allowDrop
    boolean
    asChild
    boolean
    dir
    'ltr' | 'rtl'"ltr"
    disabled
    boolean
    files
    File[]
    getRootNode
    () => Node | ShadowRoot | Document
    id
    string
    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 }>
    locale
    string"en-US"
    maxFiles
    number
    maxFileSize
    number
    minFileSize
    number
    name
    string
    onFileAccept
    (details: FileAcceptDetails) => void
    onFileReject
    (details: FileRejectDetails) => void
    onFilesChange
    (details: FileChangeDetails) => void
    translations
    IntlTranslations
    validate
    (file: File) => FileError[] | null

    Item

    PropTypeDefault
    file
    File
    asChild
    boolean

    Label

    PropTypeDefault
    asChild
    boolean

    Trigger

    PropTypeDefault
    asChild
    boolean

    Dropzone

    PropTypeDefault
    asChild
    boolean

    ItemName

    PropTypeDefault
    asChild
    boolean

    ItemGroup

    PropTypeDefault
    asChild
    boolean

    ItemPreview

    PropTypeDefault
    asChild
    boolean
    type
    string'.*'

    ItemSizeText

    PropTypeDefault
    asChild
    boolean

    ItemPreviewImage

    PropTypeDefault
    asChild
    boolean

    ItemDeleteTrigger

    PropTypeDefault
    asChild
    boolean