File Upload Component

v0 prompt for a file upload component with drag-and-drop, progress bars, previews, and accessibility.

v0uploadcomponentdrag-and-drop

Prompt

Create a file upload component with:

- Drag and drop zone with dashed border
- "Drop files here or click to browse" text with upload icon
- Click to open native file picker
- Visual feedback during drag hover (border color change, background pulse)
- Multi-file upload support
- File type restrictions with clear error message (e.g., "Only PNG, JPG, PDF allowed")
- File size limit with validation (e.g., "Max 10MB per file")
- Upload progress bar for each file (percentage + bytes transferred)
- File preview: thumbnails for images, icons for other types
- Remove file button (X) on each uploaded file
- Upload state: idle → uploading → complete → error
- Retry button for failed uploads
- Total upload progress indicator
- Accessible: keyboard navigable, screen reader announcements

Use shadcn/ui Card and Progress components. Tailwind CSS styling with smooth transitions.

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.

Related prompts

Dashboard UI Component

A v0 prompt for generating an analytics dashboard with KPI cards, charts, and activity tables.

Command Palette Component

v0 prompt for a command palette component with fuzzy search, keyboard navigation, and grouped results.

Data Table with Advanced Features

v0 prompt for an advanced data table with sorting, filtering, bulk actions, and expandable rows.

Multi-Step Form Wizard

v0 prompt for a multi-step form wizard with validation, file upload, and review step.