Forms
File Upload Dropzone
A drag-and-drop file upload component with previews, progress bars, and validation.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
Create a drag-and-drop file upload component. Features: dropzone area with upload icon and instructions, file type validation (images only: jpg, png, webp), 5MB max size limit, file preview thumbnails, upload progress bars, individual file remove buttons, and error messages for invalid files. Use shadcn/ui Card, Button, and Progress components and Tailwind CSS. Make it responsive and accessible with proper drag state styling.
Chinese Prompt
创建一个拖放文件上传组件。功能包括：带上传图标和说明的拖放区域、文件类型验证（仅图片：jpg、png、webp）、最大 5MB 限制、文件预览缩略图、上传进度条、单个文件删除按钮和无效文件错误信息。使用 shadcn/ui Card、Button 和 Progress 组件以及 Tailwind CSS。使其响应式且可访问，包含正确的拖拽状态样式。
## Overview
A complete file upload pattern with drag-and-drop, validation, previews, and progress feedback. Handles common upload UX needs.
## Features
- Drag-and-drop zone
- File type and size validation
- Preview thumbnails
- Upload progress bars
- Individual file removal
- Error messaging
- Responsive layout
## Usage
Copy the prompt into v0 or Cursor. Connect to your upload endpoint or storage service.
## Customization
Modify the prompt to:
- Support multiple file types
- Add image cropping before upload
- Support multi-file upload queue
- Add cloud upload status indicators