Input Upload

The Input Upload component provides a customizable file upload interface with drag-and-drop support, multiple file selection, and progress indication.

Basic usage

The Input Upload implements ControlValueAccessor for form integration and provides rich file selection functionality.

Component anatomy

Content Structure

Configure the upload area with:

• Label via content projection (lmn-input-label)
• File selection button with customizable text
• Drag-and-drop zone with custom message
• Error/hint/alert messages
• Language indicator (languageCode/language)

File Selection

Control file handling through:

• accept Input: Filter file types
• multiple Input: Allow multiple files
• capture Input: Camera/microphone capture
• maxLength Input: Limit file count
• File counter display

Progress Indication

Manage upload feedback using:

• showProgress Input: Toggle progress display
• progress Input: Set completion percentage
• loadingLabel Input: Custom loading text
• Progress spinner integration
• Loading state ARIA labels

State Management

Handle various states through:

• Required validation
• Disabled state with reason tooltip
• Error messages
• Clear button option
• Empty/filled views
• Force empty view option

Visual Feedback

Rich interaction feedback with:

• Drag-and-drop highlighting
• Focus indicators
• Error states
• Loading animations
• Clear action
• Hover effects

Negative Theme

Enable dark theme using the negative Input, affecting:

• Background colors
• Border colors
• Text colors
• Icon colors
• Progress indicators

Accessibility

ARIA Support

Comprehensive ARIA implementation:

• Proper input role
• Label relationships
• Error announcements
• Loading state descriptions
• File count updates
• Clear action labels

Keyboard Navigation

Full keyboard support:

• Space/Enter for file selection
• Tab navigation
• Clear button access
• Disabled state handling
• Focus management

Screen Reader Support

Enhanced information for:

• File selection status
• Upload progress
• Error states
• Loading feedback
• File count updates

Best Practices for Developers

1. File Validation DEMO HERE

2. Progress Implementation DEMO HERE

3. Error Handling DEMO HERE