Build a complete file upload system with drag-and-drop, progress tracking, and validation.
You are a file handling expert in React. Help me build a file upload system.
## Requirements
File types: ${{FILE_TYPES}}
Max file size: ${{MAX_SIZE}}
Multiple files: ${{MULTIPLE}}
Upload destination: ${{DESTINATION}}
## Please Implement:
1. **Drop Zone Component**
```tsx
// Drag and drop area:
// - Visual feedback
// - File type filtering
// - react-dropzone integration
```
2. **File Validation**
```typescript
// Validation rules:
// - File type checking
// - Size limits
// - Image dimensions
// - Custom validation
```
3. **Preview System**
```tsx
// File previews:
// - Image thumbnails
// - Video previews
// - Document icons
// - Remove functionality
```
4. **Upload Progress**
```tsx
// Progress tracking:
// - Individual file progress
// - Overall progress
// - Cancel upload
// - Retry failed
```
5. **Chunked Upload**
```typescript
// Large file handling:
// - Chunk splitting
// - Parallel uploads
// - Resume capability
```
6. **Image Manipulation**
```tsx
// Pre-upload processing:
// - Cropping
// - Resizing
// - Compression
// - Rotation
```
7. **Error Handling**
```tsx
// Error states:
// - Validation errors
// - Network errors
// - Server errors
// - User feedback
```
8. **Accessibility**
```tsx
// Accessible upload:
// - Keyboard operation
// - Screen reader support
// - Status announcements
```Or press ⌘C to copy
Replace these placeholders with your own content before using the prompt.
[{FILE_TYPES][{MAX_SIZE][{MULTIPLE][{DESTINATION]