File Upload | Ark UI

Preview Component

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

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 { FileUpload } from '@ark-ui/react'
import { FileIcon } from './icons'

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>
)

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

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) => (
        <For each={files()}>
          {(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.ItemGroup>
  </FileUpload.Root>
)

<script setup lang="ts">
import { FileUpload } from '@ark-ui/vue'
</script>

<template>
  <FileUpload.Root :maxFiles="5">
    <FileUpload.Dropzone>
      <FileUpload.Label>Drag your file(s) here</FileUpload.Label>
    </FileUpload.Dropzone>
    <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
    <FileUpload.ItemGroup v-slot="files">
      <FileUpload.Item v-for="file in files" :file="file" :key="file">
        <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.ItemGroup>
  </FileUpload.Root>
</template>

API Reference

Item

Prop	Type	Default
`file`	`File`
`asChild`	`boolean`

Root

Prop	Type	Default
`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`

Label

Prop	Type	Default
`asChild`	`boolean`

Trigger

Prop	Type	Default
`asChild`	`boolean`

Dropzone

Prop	Type	Default
`asChild`	`boolean`

ItemName

Prop	Type	Default
`asChild`	`boolean`

ItemGroup

Prop	Type	Default
`asChild`	`boolean`

ItemPreview

Prop	Type	Default
`asChild`	`boolean`
`type`	`string`	`'.*'`

ItemSizeText

Prop	Type	Default
`asChild`	`boolean`

ItemPreviewImage

Prop	Type	Default
`asChild`	`boolean`

ItemDeleteTrigger

Prop	Type	Default
`asChild`	`boolean`