File Upload Component

v0v0uploadcomponentdrag-and-drop

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

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.

What you get when you save this prompt

Your workspace unlocks powerful tools to iterate and improve.

AI OPTIMIZE

AI Optimization

One-click improvement with structure analysis and pattern suggestions.

VERSION DIFF

Version History

Track every edit. Compare versions side-by-side with word-level diffs.

ORGANIZE

Development

Code Review

Testing

Marketing

Folders & Tags

Organize your library with nested folders, tags, and drag-and-drop.

MCP

$ npm i -g @promptingbox/mcp

Claude · Cursor · ChatGPT

Use Everywhere

Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.

Your prompts, organized

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