File Upload
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
Component not found
This comprehensive file upload component demonstrates drag-and-drop functionality with no additional dependencies, perfect for React applications and Next.js projects requiring robust file handling capabilities.
Img Preview
Click to upload or drag and drop
SVG, PNG, JPG or GIF
The image preview dropzone showcases real-time file preview functionality, ideal for photo uploads, avatar selection, and media management systems in modern web applications.
Chat
Select your files
Chat form dropzone integration demonstrates file upload functionality for messaging applications, perfect for chat interfaces and collaborative platforms requiring file sharing capabilities.
Installation
npx uilayouts@latest add file-upload
FileUploader Props
| 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. |
FileUploaderContext
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. |