File Upload

A datetime picker built on top of shadcn-ui and no additional library needed.

Thanks to Yerfa

Click to upload or drag and drop

SVG, PNG, JPG or GIF

Img Preview

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.