āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/sadmann7/diceui/components/file-upload ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
npx shadcn@latest add "https://diceui.com/r/file-upload"
```package-install
@radix-ui/react-slot
```
<ComponentSource name="file-upload" />
Import the parts, and compose them together.
import * as FileUpload from "@/components/ui/file-upload";
<FileUpload.Root>
<FileUpload.Dropzone />
<FileUpload.Trigger />
<FileUpload.List>
<FileUpload.Item>
<FileUpload.ItemPreview />
<FileUpload.ItemMetadata />
<FileUpload.ItemProgress />
<FileUpload.ItemDelete />
</FileUpload.Item>
</FileUpload.List>
<FileUpload.Clear />
</FileUpload.Root>
Validate files with the onFileValidate prop on the Root component based on type, size, and custom rules. This will override the default file rejection message.
Upload files directly with the onUpload prop on the Root component.
Render a circular progress indicator instead of a linear one by enabling the circular prop on the ItemProgress component.
Render a fill progress indicator instead of a linear one by enabling the fill prop on the ItemProgress component.
Integrate with uploadthing for secure, type-safe file uploads with real-time progress tracking.
<ComponentTabs name="file-upload-uploadthing-demo" align="start" className="p-8" />Integrate into a chat input for uploading files. For demo the Dropzone is absolutely positioned to cover the entire viewport.
Use the value and onValueChange props to handle file uploads with validation and submission.
The main container component for the file upload functionality.
<AutoTypeTable path="./types/docs/file-upload.ts" name="RootProps" />
A container for drag and drop functionality.
<AutoTypeTable path="./types/docs/file-upload.ts" name="DropzoneProps" />
<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the dropzone is disabled.", }, { title: "[data-dragging]", value: "Present when files are being dragged over the dropzone.", }, { title: "[data-invalid]", value: "Present when there was an error with the files being uploaded.", }, ]} />
A button that opens the file selection dialog.
<AutoTypeTable path="./types/docs/file-upload.ts" name="TriggerProps" />
<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the trigger is disabled.", } ]} />
A container for displaying uploaded files.
<AutoTypeTable path="./types/docs/file-upload.ts" name="ListProps" />
<DataAttributesTable attributes={[ { title: "[data-orientation]", value: ["horizontal", "vertical"], }, { title: "[data-state]", value: ["active", "inactive"], }, ]} />
Individual file item component.
<AutoTypeTable path="./types/docs/file-upload.ts" name="ItemProps" />
Displays a preview of the file, showing an image for image files or an appropriate icon for other file types.
<AutoTypeTable path="./types/docs/file-upload.ts" name="ItemPreviewProps" />
Displays file information such as name, size, and error messages.
<AutoTypeTable path="./types/docs/file-upload.ts" name="ItemMetadataProps" />
Shows the upload progress for a file.
<AutoTypeTable path="./types/docs/file-upload.ts" name="ItemProgressProps" />
A button to remove a file from the list.
<AutoTypeTable path="./types/docs/file-upload.ts" name="ItemDeleteProps" />
A button to clear all files from the list.
<AutoTypeTable path="./types/docs/file-upload.ts" name="ClearProps" />
<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the clear button is disabled.", }, ]} />
<KeyboardShortcutsTable shortcuts={[ { keys: ["Enter", "Space"], description: "When focus is on the dropzone or trigger, opens the file selection dialog.", }, { keys: ["Tab"], description: "Moves focus between the dropzone, trigger, and file delete buttons.", }, { keys: ["Shift + Tab"], description: "When the dropzone is focused, moves focus away from the dropzone.", }, ]} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā