Upload Patterns
File upload workflows optimized for music, images, and documents with progress tracking and validation.
Overview
File uploads are a core feature of AVNIR products. MUZISYSTEM provides robust patterns for handling various file types with progress tracking, validation, and error recovery.
These patterns are optimized for large files (audio, video) and support both single and batch uploads with drag-and-drop functionality.
Upload Types
Audio Upload
Optimized for music files with metadata extraction and waveform generation.
- MP3, WAV, FLAC support
- Metadata extraction (ID3 tags)
- Waveform preview
- Audio quality validation
- Chunked upload for large files
Image Upload
Image uploads with preview, cropping, and optimization.
- JPG, PNG, WebP support
- Instant preview
- Crop and resize
- Automatic optimization
- Multiple images batch
Document Upload
Document uploads with validation and preview.
- PDF, DOC, TXT support
- File size validation
- Virus scanning
- Preview generation
- Metadata extraction
Batch Upload
Multiple files upload with queue management.
- Drag & drop multiple files
- Upload queue
- Individual progress
- Pause/resume support
- Error recovery
Upload States
Clear visual feedback for each upload state:
Idle
Ready to accept files with drag & drop zone. User can select files or drag them into the upload area.
Validating
Checking file type, size, and format before starting the upload process.
Uploading
Progress bar with percentage and estimated time. Shows upload speed and bytes transferred.
Processing
Server-side processing such as transcoding, optimization, or metadata extraction.
Complete
Success confirmation with preview. File is ready to use and accessible in the system.
Error
Clear error message with retry option. Preserves user's file selection for easy retry.
Validation Rules
- File Type - Whitelist allowed MIME types
- File Size - Maximum size limits per file type
- File Name - Sanitize and validate file names
- Total Size - Limit total upload size per session
- Virus Scan - Scan files for malware before processing
- Content Validation - Verify file content matches extension
Progress Tracking
Provide detailed progress information:
Upload Progress
Percentage and bytes uploaded/total
Speed Indicator
Current upload speed (MB/s)
Time Remaining
Estimated time to completion
Queue Position
Position in batch upload queue
Error Handling
Handle common upload errors gracefully:
- File Too Large - "File exceeds maximum size of X MB"
- Invalid Type - "Only MP3, WAV, and FLAC files are supported"
- Network Error - "Upload failed. Check your connection and try again"
- Server Error - "Server error. Please try again later"
- Quota Exceeded - "Storage limit reached. Upgrade to upload more"
Always provide a retry option and preserve user's file selection.
Accessibility
- Keyboard Support - Full keyboard navigation and file selection
- Screen Reader - Announce upload progress and status changes
- Focus Management - Maintain focus during upload process
- Alternative Input - Traditional file input as fallback
- Error Announcement - Errors announced to assistive technology
Implementation Guidelines
- Chunked Upload - Split large files for reliability and resume support
- Client Validation - Validate before upload to save bandwidth
- Server Validation - Always validate on server (never trust client)
- Optimistic UI - Show preview immediately while uploading
- Background Upload - Allow users to continue working during upload
- Cleanup - Remove incomplete uploads after timeout