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-partattribute 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>
{(api) =>
api.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.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.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>
<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.Root>
</template>
API Reference
Root
| Prop | Type | Default |
|---|---|---|
acceptThe accept file types | string | Record<string, string[]> | |
allowDropWhether to allow drag and drop in the dropzone element | boolean | |
asChildRender as a different element type. | boolean | |
captureThe default camera to use when capturing media | 'user' | 'environment' | |
directoryWhether to accept directories, only works in webkit browsers | boolean | |
disabledWhether the file input is disabled | boolean | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements. Useful for composition. | 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
}> | |
localeThe current locale. Based on the BCP 47 definition. | string | "en-US" |
maxFilesThe maximum number of files | number | |
maxFileSizeThe maximum file size in bytes | number | |
minFileSizeThe minimum file size in bytes | number | |
nameThe name of the underlying file input | string | |
onFileAcceptFunction called when the file is accepted | (details: FileAcceptDetails) => void | |
onFileChangeFunction called when the value changes, whether accepted or rejected | (details: FileChangeDetails) => void | |
onFileRejectFunction called when the file is rejected | (details: FileRejectDetails) => void | |
translationsThe localized messages to use. | IntlTranslations | |
validateFunction to validate a file | (file: File) => FileError[] | null |
Dropzone
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ItemDeleteTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ItemGroup
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ItemName
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ItemPreviewImage
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ItemPreview
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
typeThe file type to match against. Matches all file types by default. | string | '.*' |
Item
| Prop | Type | Default |
|---|---|---|
file | File | |
asChildRender as a different element type. | boolean |
ItemSizeText
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Label
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Trigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Previous
EditableNext
Hover Card