File Upload

an input component that allows file uploading.

Click to upload or drag and drop

SVG, PNG, JPG or GIF

Installation

Run the following command

pnpm dlx @shadext/cli add file-upload

API Reference

prop	type	defaultValue
`value`	`File[]`	`null`
`onValueChange`	`(value: File[]) => void`	`--`
`reSelect`	`boolean`	`false`
`orientation`	`"horizantle"\| "vertical"`	`horizantle`
`dropzoneOptions`	`DropzoneOptions`	`--`

Accessibility

The Accordion component adheres to the WAI-ARIA design pattern. It is accessible by keyboard and screen readers.

key	description
`Enter`	`opens the file upload pc interface`
`ArrowUp`	`Move to the previous item`
`ArrowDown`	`Move to the next item`
`Delete/Backspace`	`remove the selected item , otherwise removes the last item`

Usage

import {
  FileUploader,
  FileUploaderContent,
  FileUploaderItem,
  FileInput,
} from "@/components/extension/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>

Example

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.

Drop files here

Form

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