File Uploader
A simplified and extendable <FileUploader /> component built on top of react-dropzone. This component provides a streamlined interface for uploading files and is designed for flexibility and customization. It also integrates the <Sooner /> component and comes from the ShadCN Extensions library, making it a powerful and adaptable solution for managing file uploads in various applications.
Click to upload or drag and drop
SVG, PNG, JPG or GIF
Additional Examples
With DropzoneOptions
The dropzoneOptions prop, provided by React-Dropzone, is an object that allows customization of the useDropzone hook behavior when passed to the <FileUploader /> component. This enables fine-tuning of various settings for file uploads. For a complete list of available options, refer to the official React-Dropzone documentation here.
Drop files here
As Form with ZOD Validation
The FileUploadDropzone component enables file uploading with form validation, integrating the zod library for schema-based validation and react-hook-form for managing form state. Learn more about the integration of zod and react-hook-form in the Form documentation.
Configurable Props
<FileUploader>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
value | File[] | False | An array of files that are selected by the user. |
onValueChange | function | (value: File[]) => void | A callback function that is called when the value changes. |
reSelect | boolean | False | if true, all of the currently selected files will be all removed if ANY new files are selected. |
orientation | "horizontal" | "vertical" | Vertical | The orientation of the file uploader. |
dropzoneOptions | dropzoneOptions | True | Options to be passed to the useDropzone hook from react-dropzone Learn More. |