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:

import { FileIcon } from 'lucide-react'
import { FileUpload } from '@ark-ui/react'

export const Basic = () => {
  return (
    <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>
        <FileUpload.Context>
          {({ acceptedFiles }) =>
            acceptedFiles.map((file) => (
              <FileUpload.Item key={file.name} 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.Context>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

import { For } from 'solid-js'
import { FileUpload } from '@ark-ui/solid'

export 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>
      <FileUpload.Context>
        {(context) => (
          <For each={context().acceptedFiles}>
            {(file) => (
              <FileUpload.Item file={file}>
                <FileUpload.ItemPreview type="image/*">
                  <FileUpload.ItemPreviewImage />
                </FileUpload.ItemPreview>
                <FileUpload.ItemPreview type=".*">Any Icon</FileUpload.ItemPreview>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
                <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
              </FileUpload.Item>
            )}
          </For>
        )}
      </FileUpload.Context>
    </FileUpload.ItemGroup>
    <FileUpload.HiddenInput />
  </FileUpload.Root>
)

<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

Prop	Default	Type
`accept`		`string \| Record<string, string[]>` The accept file types
`allowDrop`	`true`	`boolean` Whether to allow drag and drop in the dropzone element
`asChild`		`boolean` Render as a different element type.
`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.
`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
`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
`translations`		`IntlTranslations` The localized messages to use.
`validate`		`(file: File) => FileError[] \| null` Function to validate a file

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

Dropzone

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Data Attribute	Value
`[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

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

ItemDeleteTrigger

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Data Attribute	Value
`[data-scope]`	file-upload
`[data-part]`	item-delete-trigger
`[data-disabled]`	Present when disabled

ItemGroup

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Data Attribute	Value
`[data-scope]`	file-upload
`[data-part]`	item-group
`[data-disabled]`	Present when disabled

ItemName

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Data Attribute	Value
`[data-scope]`	file-upload
`[data-part]`	item-name
`[data-disabled]`	Present when disabled

ItemPreviewImage

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Data Attribute	Value
`[data-scope]`	file-upload
`[data-part]`	item-preview-image
`[data-disabled]`	Present when disabled

ItemPreview

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.
`type`	`'.*'`	`string` The file type to match against. Matches all file types by default.

Data Attribute	Value
`[data-scope]`	file-upload
`[data-part]`	item-preview
`[data-disabled]`	Present when disabled

Item

Prop	Default	Type
`file`		`File`
`asChild`		`boolean` Render as a different element type.

Data Attribute	Value
`[data-scope]`	file-upload
`[data-part]`	item
`[data-disabled]`	Present when disabled

ItemSizeText

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Data Attribute	Value
`[data-scope]`	file-upload
`[data-part]`	item-size-text
`[data-disabled]`	Present when disabled

Label

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Data Attribute	Value
`[data-scope]`	file-upload
`[data-part]`	label
`[data-disabled]`	Present when disabled

Trigger

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Data Attribute	Value
`[data-scope]`	file-upload
`[data-part]`	trigger
`[data-disabled]`	Present when disabled