Asset Upload
Allows users to upload, preview, and manage files or media assets. Supports drag-and-drop interactions and validation states.
Drop files here or click to upload
Images, documents, and other files up to 10MB
Code
Installation
npx shadcn@latest add asset-uploadBasic Example
import { AssetUpload } from "@/components/ui/asset-upload"
import { useState } from "react"
const [files, setFiles] = useState([])
<AssetUpload
files={files}
onFilesChange={setFiles}
placeholder="Drop files here or click to upload"
/>With Restrictions
<AssetUpload
files={files}
onFilesChange={setFiles}
accept="image/*"
maxFiles={5}
maxSize={5 * 1024 * 1024}
placeholder="Upload up to 5 images"
/>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| files | UploadedFile[] | [] | Array of uploaded files |
| onFilesChange | function | — | Callback when files change |
| variant | string | "default" | Visual variant. Options: default, compact, drag-only |
| accept | string | — | File types to accept (e.g., "image/*", ".pdf,.doc") |
| multiple | boolean | true | Allow multiple file selection |
| maxFiles | number | — | Maximum number of files allowed |
Default
Drop files here or click to upload
Images, documents, and other files
Compact
Usage Guidelines
When to Use
Use the asset upload component when users need to upload files, images, or documents. Perfect for profile pictures, document attachments, image galleries, and file management interfaces.
Choose the compact variant for forms with limited space. Use drag-only variant when you want to emphasize drag and drop interaction.
Best Practices
- Provide clear placeholder text and descriptions
- Set appropriate file size and type restrictions
- Show file previews when possible, especially for images
- Display upload progress for large files
- Validate files before upload to prevent errors
Accessibility
The component uses semantic HTML and ARIA attributes to ensure screen readers can announce file selection and upload status. Keyboard navigation is fully supported.
Ensure file input labels are descriptive and provide clear error messages for invalid file types or sizes.