Docs
File Uploader

File Uploader

File Uploader component is an input component that allows file uploading.

NPM

Installation

yarn add @camped-ui/file-uploader

Usage

import {
  FileUploader,
  FileUploaderContent,
  FileUploaderItem,
  FileInput,
} from "@camped-ui/file-uploader";
 
<FileUploader
  value={files}
  onValueChange={setFiles}
  dropzoneOptions={dropZoneConfig}
  className="relative max-w-xs space-y-1"
>
  <FileInput className="border border-dashed border-gray-500">
    <Button variant="outline">Upload a file</Button>
  </FileInput>
  <FileUploaderContent className="h-48 ">
    <FileUploaderItem index={i}>file 1</FileUploaderItem>
    <FileUploaderItem index={i}>file 2</FileUploaderItem>
    <FileUploaderItem index={i}>...</FileUploaderItem>
  </FileUploaderContent>
</FileUploader>

Examples

Default

DropzoneOptions

The dropzoneOptions prop is an object that can be passed to the FileUploader component to customize the useDropzone hook behavior. You can find the full list of options here.

Form

This form uses the reSelect prop to remove all the current selected files when new files are selected.

Dropdown MenuForm