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

PropTypeDefault


`file`	`File`
`asChild`	`boolean`

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`

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`