File Upload & Progress Bar

{{-- Basic Progress Bar --}}
<x-ui.progress-bar
    :percentage="75"
    variant="primary"
    size="md"
/>
 
{{-- With Label --}}
<x-ui.progress-bar
    :percentage="50"
    variant="success"
    label="Upload Progress"
    size="md"
/>
 
{{-- Different Variants --}}
<x-ui.progress-bar :percentage="25" variant="primary" label="Primary" />
<x-ui.progress-bar :percentage="50" variant="success" label="Success" />
<x-ui.progress-bar :percentage="75" variant="warning" label="Warning" />
<x-ui.progress-bar :percentage="90" variant="danger" label="Danger" />
<x-ui.progress-bar :percentage="60" variant="info" label="Info" />
 
{{-- Different Sizes --}}
<x-ui.progress-bar :percentage="60" size="sm" label="Small" />
<x-ui.progress-bar :percentage="60" size="md" label="Medium" />
<x-ui.progress-bar :percentage="60" size="lg" label="Large" />
<x-ui.progress-bar :percentage="60" size="xl" label="Extra Large" />
 
{{-- Dynamic Progress with Livewire --}}
<x-ui.progress-bar
    :percentage="$uploadProgress"
    variant="info"
    label="Uploading..."
    size="lg"
/>

#Props

• percentage - Progress value (0-100)
• variant - Color variant: primary, success, warning, danger, info
• size - Height: sm, md, lg, xl
• label - Optional label text

#Features

• Smooth transitions with transition-all duration-500
• ARIA accessible with role="progressbar" and aria-valuenow
• Automatic percentage display when label is provided
• Responsive and works in dark mode

{{-- Basic File Upload --}}
<x-ui.file-upload
    wire-model="document"
    label="Upload Document"
    accept="*"
    max-size="10MB"
/>
 
{{-- Image Upload with Preview --}}
<x-ui.file-upload
    wire-model="photo"
    label="Upload Photo"
    accept="image/*"
    max-size="5MB"
    description="PNG, JPG, GIF up to 5MB"
/>
 
{{-- Document Upload (PDF, Word) --}}
<x-ui.file-upload
    wire-model="document"
    label="Upload Document"
    accept=".pdf,.doc,.docx"
    max-size="20MB"
    description="PDF or Word documents"
/>
 
{{-- Multiple Files Upload --}}
<x-ui.file-upload
    wire-model="photos"
    label="Upload Multiple Photos"
    accept="image/*"
    :multiple="true"
    max-size="5MB each"
    description="Upload multiple images"
/>
 
{{-- With Error Message --}}
<x-ui.file-upload
    wire-model="file"
    label="Upload File"
    error="File size must be less than 10MB"
/>

#Livewire Component Setup

use Livewire\WithFileUploads;
use Livewire\Attributes\Validate;
 
class MyComponent extends Component
{
    use WithFileUploads;
 
    #[Validate('nullable|image|max:10240')]
    public $photo;
 
    #[Validate('nullable|mimes:pdf,doc,docx|max:20480')]
    public $document;
 
    public function updatedPhoto()
    {
        $this->validate(['photo' => 'image|max:10240']);
    }
}

#Props

• wire-model - Livewire property name
• label - Field label
• accept - File type filter (e.g., image/*, .pdf, etc.)
• multiple - Allow multiple file selection
• max-size - Display max size hint
• description - Help text
• error - Error message

#Features

• Drag & Drop: Drag files directly onto the upload zone
• Image Previews: Automatic preview for image files with thumbnails
• Real-time Progress: Shows upload progress with integrated progress bar
• File Type Filtering: Restrict file types with accept prop
• Multiple Files: Support for uploading multiple files at once
• Validation: Integration with Livewire validation and error display
• Remove Files: Remove files before upload with preview controls
• Visual Feedback: Border highlights on drag over

#Events

The component automatically listens to Livewire upload events:

• livewire-upload-start - Upload begins
• livewire-upload-progress - Progress updates
• livewire-upload-finish - Upload completes
• livewire-upload-error - Upload fails