Ark Logo

File Upload

A component that is used to upload multiple files.

Drop your files here

    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:

    <script setup lang="ts">
    import { FileUpload } from '@ark-ui/vue'
    </script>
    
    <template>
      <FileUpload.Root :maxFiles="5">
        <FileUpload.Label>File Upload</FileUpload.Label>
        <FileUpload.Dropzone>Drop your files here</FileUpload.Dropzone>
        <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
        <FileUpload.ItemGroup>
          <FileUpload.Context v-slot="{ acceptedFiles }">
            <FileUpload.Item v-for="file in acceptedFiles" :file="file" :key="file.name">
              <FileUpload.ItemPreview type="image/*">
                <FileUpload.ItemPreviewImage />
              </FileUpload.ItemPreview>
              <FileUpload.ItemPreview type=".*">
                <div>Generic Icon</div>
              </FileUpload.ItemPreview>
              <FileUpload.ItemName />
              <FileUpload.ItemSizeText />
              <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
            </FileUpload.Item>
          </FileUpload.Context>
        </FileUpload.ItemGroup>
        <FileUpload.HiddenInput />
      </FileUpload.Root>
    </template>
    

    API Reference

    Root

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

    The accept file types

    allowDroptrue
    boolean

    Whether to allow drag and drop in the dropzone element

    asChildfalse
    boolean

    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

    id
    string

    The unique identifier of the machine.

    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.

    locale'en-US'
    string

    The current locale. Based on the BCP 47 definition.

    maxFiles1
    number

    The maximum number of files

    maxFileSizeInfinity
    number

    The maximum file size in bytes

    minFileSize0
    number

    The minimum file size in bytes

    name
    string

    The name of the underlying file input

    translations
    IntlTranslations

    The localized messages to use.

    validate
    (file: File) => FileError[]

    Function to validate a file

    EmitEvent
    fileAccept
    [details: FileAcceptDetails]

    Function called when the file is accepted

    fileChange
    [details: FileChangeDetails]

    Function called when the value changes, whether accepted or rejected

    fileReject
    [details: FileRejectDetails]

    Function called when the file is rejected

    Data AttributeValue
    [data-scope]file-upload
    [data-part]root
    [data-disabled]Present when disabled
    [data-dragging]Present when in the dragging state

    Dropzone

    PropDefaultType
    asChildfalse
    boolean

    Data AttributeValue
    [data-scope]file-upload
    [data-part]dropzone
    [data-invalid]Present when invalid
    [data-disabled]Present when disabled
    [data-dragging]Present when in the dragging state

    HiddenInput

    PropDefaultType
    asChildfalse
    boolean

    ItemDeleteTrigger

    PropDefaultType
    asChildfalse
    boolean

    Data AttributeValue
    [data-scope]file-upload
    [data-part]item-delete-trigger
    [data-disabled]Present when disabled

    ItemGroup

    PropDefaultType
    asChildfalse
    boolean

    Data AttributeValue
    [data-scope]file-upload
    [data-part]item-group
    [data-disabled]Present when disabled

    ItemName

    PropDefaultType
    asChildfalse
    boolean

    Data AttributeValue
    [data-scope]file-upload
    [data-part]item-name
    [data-disabled]Present when disabled

    ItemPreviewImage

    PropDefaultType
    asChildfalse
    boolean

    Data AttributeValue
    [data-scope]file-upload
    [data-part]item-preview-image
    [data-disabled]Present when disabled

    ItemPreview

    PropDefaultType
    asChildfalse
    boolean

    type'.*'
    string

    The file type to match against. Matches all file types by default.

    Data AttributeValue
    [data-scope]file-upload
    [data-part]item-preview
    [data-disabled]Present when disabled

    Item

    PropDefaultType
    file
    File

    asChildfalse
    boolean

    Data AttributeValue
    [data-scope]file-upload
    [data-part]item
    [data-disabled]Present when disabled

    ItemSizeText

    PropDefaultType
    asChildfalse
    boolean

    Data AttributeValue
    [data-scope]file-upload
    [data-part]item-size-text
    [data-disabled]Present when disabled

    Label

    PropDefaultType
    asChildfalse
    boolean

    Data AttributeValue
    [data-scope]file-upload
    [data-part]label
    [data-disabled]Present when disabled

    Trigger

    PropDefaultType
    asChildfalse
    boolean

    Data AttributeValue
    [data-scope]file-upload
    [data-part]trigger
    [data-disabled]Present when disabled