GitHub

File Upload

A component that allows users to upload files.

Docs API

    Installation

    pnpm dlx shadcn@latest add https://shark-ui.vercel.app/r/file-upload.json

    Usage

    import { 
  FileUpload,
  FileUploadTrigger,
  FileUploadItemGroup,
  FileUploadContext,
  FileUploadItem,
  FileUploadItemPreview,
  FileUploadItemPreviewImage,
} from "@/components/ui/file-upload";
    <FileUpload maxFiles={4}>
  <FileUploadTrigger>Upload</FileUploadTrigger>
  <FileUploadItemGroup>
    <FileUploadContext>
      {({ acceptedFiles }) => (
        <FileUploadItem file={acceptedFiles[0]}>
          <FileUploadItemPreview>
            <FileUploadItemPreviewImage src={acceptedFiles[0].name} />
          </FileUploadItemPreview>
        </FileUploadItem>
      )}
    </FileUploadContext>
  </FileUploadItemGroup>
</FileUpload>