A comprehensive file upload component built on top of shadcn-ui with no additional libraries required. Features drag-and-drop functionality, file preview, progress indicators, and multiple file support for modern web applications.
Thanks to Yerfa
Click to upload or drag and drop
SVG, PNG, JPG or GIF
Click to upload or drag and drop
SVG, PNG, JPG or GIF
npx uilayouts@latest add file-upload
| Prop | Type | Default | Description |
|---|---|---|---|
value | File[] | null | null | The array of uploaded files. |
reSelect | boolean | undefined | If true, allows reselecting files when maxFiles is 1. |
onValueChange | (value: File[] | null) => void | - | Callback triggered when the file selection changes. |
dropzoneOptions | DropzoneOptions | {} | Configuration options for the dropzone, such as maxFiles, maxSize, and accept file types. |
orientation | 'horizontal' | 'vertical' | 'vertical' | Sets the layout direction of the file uploader. |
children | React.ReactNode | undefined | Components or elements to be rendered within the file uploader. |
className | string | undefined | Additional CSS classes for custom styling. |
dir | 'rtl' | 'ltr' | undefined | undefined | Sets text directionality, affecting navigation and layout in horizontal mode. |
ref | React.Ref<HTMLDivElement> | undefined | Reference to the uploader’s root div element. |
The FileUploaderContext is a context containing the following properties:
| Property | Type | Description |
|---|---|---|
dropzoneState | DropzoneState | The state object provided by react-dropzone, used for handling file drag-and-drop behavior. |
isLOF | boolean | Indicates if the maximum number of files has been reached. |
isFileTooBig | boolean | Indicates if the rejected file exceeds the maximum allowed size. |
removeFileFromSet | (index: number) => void | Function to remove a file at a specific index from the current selection. |
activeIndex | number | The index of the currently selected file in the list, used for navigation. |
setActiveIndex | Dispatch<SetStateAction<number>> | Function to set the active index. |
orientation | 'horizontal' | 'vertical' | Defines whether files are displayed horizontally or vertically. |
direction | 'rtl' | 'ltr' | undefined | Specifies the text direction; affects keyboard navigation in horizontal mode. |