File Upload

A component that is used to upload multiple files.

    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:

    API Reference

    Root

    PropTypeDefault
    accept
    string | Record<string, string[]>
    allowDrop
    boolean
    asChild
    boolean
    capture
    'user' | 'environment'
    directory
    boolean
    disabled
    boolean
    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
    onFileChange
    (details: FileChangeDetails) => void
    onFileReject
    (details: FileRejectDetails) => void
    translations
    IntlTranslations
    validate
    (file: File) => FileError[] | null

    Dropzone

    PropTypeDefault
    asChild
    boolean

    HiddenInput

    PropTypeDefault
    asChild
    boolean

    ItemDeleteTrigger

    PropTypeDefault
    asChild
    boolean

    ItemGroup

    PropTypeDefault
    asChild
    boolean

    ItemName

    PropTypeDefault
    asChild
    boolean

    ItemPreviewImage

    PropTypeDefault
    asChild
    boolean

    ItemPreview

    PropTypeDefault
    asChild
    boolean
    type
    string'.*'

    Item

    PropTypeDefault
    file
    File
    asChild
    boolean

    ItemSizeText

    PropTypeDefault
    asChild
    boolean

    Label

    PropTypeDefault
    asChild
    boolean

    Trigger

    PropTypeDefault
    asChild
    boolean