File Upload

Composable dropzone with file list, keyboard support and size/count limits.

File Upload

Composable dropzone with file list, keyboard support and size/count limits.

Preview

Features

  • Drag and drop or click, powered by react-dropzone.
  • File count and size limits with toast feedback (sonner).
  • Arrow keys move between files; Delete removes one.

Installation

npx shadcn@latest add https://www.shadcn-form.com/r/file-upload.json

The CLI installs every dependency listed in the registry item.

Usage

import {
  FileInput,
  FileUploader,
  FileUploaderContent,
  FileUploaderItem,
} from '@/components/ui/file-upload'


const [files, setFiles] = React.useState<File[] | null>(null)
const dropzoneOptions = { maxFiles: 5, maxSize: 1024 * 1024 * 4, multiple: true }


<FileUploader value={files} onValueChange={setFiles} dropzoneOptions={dropzoneOptions}>
  <FileInput className="outline-dashed outline-1">
    <p className="p-6 text-sm">Drop files or click to upload</p>
  </FileInput>
  <FileUploaderContent>
    {files?.map((file, i) => (
      <FileUploaderItem key={i} index={i}>
        {file.name}
      </FileUploaderItem>
    ))}
  </FileUploaderContent>
</FileUploader>