File Upload

<div class="field" data-type="file">
				<!-- Drag and drop zone -->
				<button type="button" class="dropzone"
				aria-label="Upload area">
				<span class="axicon render" data-name="Upload"></span>
				<p><strong>Click to browse</strong> or drag files</p>
				</button>

				<input type="file" id="file" multiple>

				<ul class="files" role="region">
				<li class="">
				<div class="info">
				<div class="type">PDF</div>
				<div class="meta">
				<p class="name">Document</p>
				<p class="size">2.5 MB</p>
				</div>
				</div>
				<button class="remove" aria-label="Remove file">×</button>
				</li>
				</ul>
				</div>

• `data-type="file"` - Container for file upload component
• `data-visible="true"` - Shows file list when files present
• `data-drag="true"` - Indicates drag-over state

• `type="button"` - Upload zone uses a semantic button trigger
• `role="region"` - File list is live region
• `aria-label` - Describes upload area purpose

• Drag and Drop - Drop files directly onto upload area
• Click to Browse - Traditional file picker dialog
• Multiple Files - Upload multiple files at once
• File Validation - Accept specific file types
• File Preview - Show uploaded files with metadata
• Remove Files - Delete files before submission
• Keyboard Support - Full keyboard navigation

• Document Upload - Resume, invoice, or document submission
• Image Gallery - Photo uploads for profiles or products
• File Management - Cloud storage or file sharing
• Form Attachments - Additional information submission
• Batch Import - CSV/Excel data import
• Media Upload - Video or audio file uploads

This component automatically adapts to different screen sizes:

Mobile (< 768px)

On mobile devices:

• Optimized for small screens
• Touch-friendly spacing maintained (44px minimum)
• Text wraps naturally without overflow
• Content density optimized for readability

Desktop (1024px+)

On desktop displays:

• Enhanced visual features
• Hover states and transitions
• Full keyboard navigation support
• Optimal spacing and sizing

Framework Integration

Responsive behavior is automatic:

• Framework handles media queries
• No custom CSS required
• Mobile-first approach applied
• Accessibility maintained at all sizes

• File Size Limit - Clearly display maximum file size
• File Type Validation - Restrict to expected formats
• Virus Scanning - Scan uploaded files server-side
• Progress Indication - Show upload progress for large files
• Error Handling - Clear, actionable error messages
• Drag Feedback - Visual feedback during drag-over
• File Removal - Allow removing files before submission