Sections

Utilities

Forms

Hooks

useIsMobileNew

File Upload

A component that allows users to upload files.

Docs API

Drop files here

You can upload up to 2 files at a time.

Installation


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.

Drop files here

You can upload up to 5 files at a time.

Trigger only

Dropzone only

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

Drop your files here

Accepted Files

Use the accept prop to restrict file types.

Drop your images here

Only PNG and JPEG formats are allowed.

With Field

Use Field to add helper text and error handling.

Custom Preview


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

Drop files here

Media Capture

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

The capture prop is only supported on mobile devices.

Directory Upload

Use the directory prop to upload entire folders.

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.

Drop files here

Custom spacing

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

Default spacing is --spacing(6).

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[]> \| FileMimeType[]`	`-`
`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

Float