Sections

Components

Utilities

Forms

Hooks

useIsMobile

File Upload

Copy Markdown

A component that allows users to upload files.

Docs API

PreviewCode

Drop files here

Browse files You can upload up to 2 files at a time.

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/file-upload

Anatomy#

FileUpload
├── FileUploadTrigger
├── FileUploadDropzone
│ ├── FileUploadDropzoneIcon
│ ├── FileUploadTitle
│ ├── FileUploadDescription
│ └── FileUploadHelper
├── FileUploadItemGroup
│ └── FileUploadList
│ └── FileUploadItem
│ ├── FileUploadItemPreview
│ │ └── FileUploadItemPreviewImage
│ ├── FileUploadItemName
│ ├── FileUploadItemSize
│ └── FileUploadItemDeleteTrigger
└── FileUploadClearTrigger

Usage#

import { 
  FileUpload,
  FileUploadDropzone,
  FileUploadDropzoneIcon,
  FileUploadTitle,
  FileUploadDescription,
  FileUploadHelper,
  FileUploadTrigger,
  FileUploadList,
} from "@/components/ui/file-upload";

<FileUpload maxFiles={2} accept={["image/*png,image/jpeg*", ".pdf"]}>
  <FileUploadDropzone>
    <FileUploadDropzoneIcon />
    <FileUploadTitle>Drop files here</FileUploadTitle>
    <FileUploadDescription>or</FileUploadDescription>
    <FileUploadTrigger />
    <FileUploadHelper>You can upload up to 2 files at a time.</FileUploadHelper>
  </FileUploadDropzone>
  <FileUploadList />
</FileUpload>

Examples#

Multiple Files#

Use the maxFiles prop to allow uploading multiple files at once.

PreviewCode

Drop files here

Browse files You can upload up to 5 files at a time.

Trigger only#

PreviewCode

Browse files

Dropzone only#

Use FileUploadDropzone to enable drag-and-drop. It exposes a data-dragging attribute for styling the drag state.

PreviewCode

Drop your files here

Accepted Files#

Use the accept prop to restrict file types.

PreviewCode

Drop your images here

Only PNG and JPEG formats are allowed.

With Field#

Use Field to add helper text and error handling.

PreviewCode

Upload images

Custom Preview#

const { acceptedFiles } = useFileUploadContext();

return (
  <div>
    {acceptedFiles.map((file) => (
      <div key={file.name}>{file.name}</div>
    ))}
  </div>
);

PreviewCode

Drop files here

Media Capture#

Use the capture prop to capture and upload media directly from the device camera.

PreviewCode

Take a picture

The capture prop is only supported on mobile devices.

Directory Upload#

Use the directory prop to upload entire folders.

PreviewCode

Select Folder

Attention: Directory Upload

When uploading directories with many files, set maxFiles to a higher value or remove it entirely to prevent rejections.

Clear Trigger#

Use FileUploadClearTrigger to remove all uploaded files at once.

PreviewCode

Drop files here

Custom spacing#

Use [--space:--spacing("value")] on FileUploadDropzone to adjust internal spacing.

Default spacing is --spacing(6).

PreviewCode

Drop your files here

You can use breakpoint utilities to change the internal spacing at different screen sizes.

md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

API Reference#

FileUpload#

Root component. Manages file state and wraps the upload UI.

Prop	Type	Default
`accept`	`string	Record<string, string[]>
`acceptedFiles`	`File[]`	`-`
`allowDrop`	`boolean`	`true`
`capture`	`"user"	"environment"`
`defaultAcceptedFiles`	`File[]`	`-`
`directory`	`boolean`	`false`
`disabled`	`boolean`	`-`
`invalid`	`boolean`	`-`
`maxFiles`	`number`	`1`
`maxFileSize`	`number`	`Infinity`
`minFileSize`	`number`	`0`
`name`	`string`	`-`
`onFileAccept`	`(details: FileAcceptDetails) => void`	`-`
`onFileChange`	`(details: FileChangeDetails) => void`	`-`
`onFileReject`	`(details: FileRejectDetails) => void`	`-`
`readOnly`	`boolean`	`-`
`required`	`boolean`	`-`
`transformFiles`	`(files: File[]) => Promise<File[]>`	`-`
`validate`	`(file: File, details: FileValidateDetails) => FileError[]	null`
`className`	`string`	`-`

FileUploadTrigger#

Opens the native file picker on click.

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

FileUploadDropzone#

Drop zone for drag-and-drop. Exposes data-dragging when files are dragged over.

Prop	Type	Default
`asChild`	`boolean`	`-`
`disableClick`	`boolean`	`-`
`className`	`string`	`-`

Attribute	Default
`--space`	`--spacing(8)`

FileUploadDropzoneIcon#

Icon shown in the dropzone.

Prop	Type	Default
`className`	`string`	`-`

FileUploadTitle#

Title text for the dropzone.

Prop	Type	Default
`className`	`string`	`-`

FileUploadDescription#

Description or hint for the dropzone.

Prop	Type	Default
`className`	`string`	`-`

FileUploadHelper#

Small text that provides additional information about the dropzone.

Prop	Type	Default
`className`	`string`	`-`

FileUploadList#

List of uploaded files. Hidden when empty.

Prop	Type	Default
`className`	`string`	`-`

FileUploadItemGroup#

List of uploaded files.

Prop	Type	Default
`asChild`	`boolean`	`-`
`type`	`"accepted"	"rejected"`
`className`	`string`	`-`

FileUploadItem#

Single uploaded file with preview and remove button.

Prop	Type	Default
`file`	`File`	required
`asChild`	`boolean`	`-`
`className`	`string`	`-`

FileUploadItemPreview#

Preview container for a file.

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

FileUploadItemPreviewImage#

Image thumbnail for image files. Use inside FileUploadItemPreview with type="image/*".

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

FileUploadItemName#

Shows the file name.

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

FileUploadItemSize#

Shows the formatted file size.

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

FileUploadItemDeleteTrigger#

Removes a single file from the list.

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

FileUploadClearTrigger#

Removes all files from the list.

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

useFileUploadContext#

Hook to access file upload state and methods. Use inside FileUpload or FileUploadRootProvider.

Property	Type
`acceptedFiles`	`File[]`
`rejectedFiles`	`FileRejection[]`
`openFilePicker`	`() => void`
`deleteFile`	`(file: File, type?: ItemType) => void`
`clearFiles`	`() => void`
`clearRejectedFiles`	`() => void`
`getFileSize`	`(file: File) => string`
`createFileUrl`	`(file: File, cb: (url: string) => void) => () => void`
`setClipboardFiles`	`(dt: DataTransfer) => boolean`

For a complete list of props, see the Ark UI documentation.

[

Field ](/docs/components/field)[

Float ](/docs/components/float)

On This Page

Installation Anatomy Usage Examples Multiple Files Trigger only Dropzone only Accepted Files With Field Custom Preview Media Capture Directory Upload Clear Trigger Custom spacing API Reference FileUpload FileUploadTrigger FileUploadDropzone FileUploadDropzoneIcon FileUploadTitle FileUploadDescription FileUploadHelper FileUploadList FileUploadItemGroup FileUploadItem FileUploadItemPreview FileUploadItemPreviewImage FileUploadItemName FileUploadItemSize FileUploadItemDeleteTrigger FileUploadClearTrigger useFileUploadContext