File Upload

Installation

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

Layout

Import the parts, and compose them together.

import {
  FileUpload,
  FileUploadDropzone,
  FileUploadTrigger,
  FileUploadList,
  FileUploadItem,
  FileUploadItemPreview,
  FileUploadItemMetadata,
  FileUploadItemProgress,
  FileUploadItemDelete,
  FileUploadClear,
} from "@/components/ui/file-upload";
 
return (
  <FileUpload>
    <FileUploadDropzone />
    <FileUploadTrigger />
    <FileUploadList>
      <FileUploadItem>
        <FileUploadItemPreview />
        <FileUploadItemMetadata />
        <FileUploadItemProgress />
        <FileUploadItemDelete />
      </FileUploadItem>
    </FileUploadList>
    <FileUploadClear />
  </FileUpload>
)

Examples

With Validation

Validate files with the onFileValidate prop on the Root component based on type, size, and custom rules. This will override the default file rejection message.

Direct Upload

Upload files directly with the onUpload prop on the Root component.

Circular Progress

Render a circular progress indicator instead of a linear one by enabling the circular prop on the ItemProgress component.

Fill Progress

Render a fill progress indicator instead of a linear one by enabling the fill prop on the ItemProgress component.

With uploadthing

Integrate with uploadthing for secure, type-safe file uploads with real-time progress tracking.

With Chat Input

Integrate into a chat input for uploading files. For demo the Dropzone is absolutely positioned to cover the entire viewport.

With Form

Use the value and onValueChange props to handle file uploads with validation and submission.

API Reference

FileUpload

The main container component for the file upload functionality.

FileUploadDropzone

A container for drag and drop functionality.

FileUploadTrigger

A button that opens the file selection dialog.

FileUploadList

A container for displaying uploaded files.

FileUploadItem

Individual file item component.

FileUploadItemPreview

Displays a preview of the file, showing an image for image files or an appropriate icon for other file types.

FileUploadItemMetadata

Displays file information such as name, size, and error messages.

FileUploadItemProgress

Shows the upload progress for a file.

FileUploadItemDelete

A button to remove a file from the list.

FileUploadClear

A button to clear all files from the list.

Accessibility

Keyboard Interactions

Credits

• Building a Hold to Delete Component - For the fill progress indicator.