Laravel File Upload Component
Free · MITDrag-and-drop file upload input with preview, size validation, and Livewire integration for server-side handling.
A File Upload built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag:
<x-aura::file-upload>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::file-upload
label="Upload File"
name="file"
wire:model="file"
/>See the full API, props and live examples in the File Upload documentation.
Overview
The File Upload component provides a user-friendly file input with drag-and-drop support, file type filtering, size validation, and image preview. It integrates with Livewire's file upload system for seamless server-side processing, temporary file storage, and validation.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string |
'' |
Label text displayed above the upload area. |
name |
string |
'' |
Input name attribute, also used for wire:model. |
accept |
string|null |
null |
Accepted file types (e.g., 'image/*', '.pdf,.docx'). |
multiple |
bool |
false |
Allow selecting multiple files. |
maxSize |
int|null |
null |
Maximum file size in kilobytes. |
preview |
bool |
false |
Show image preview for uploaded image files. |
Slots
| Slot | Description |
|---|---|
| default | Optional. Customize the drop zone content (replaces the default upload icon and text). |
Custom Drop Zone Content
<x-aura::file-upload name="file" wire:model="file" accept="image/*">
<div class="text-center py-8">
<x-aura::icon name="cloud-arrow-up" class="mx-auto h-12 w-12 text-gray-400" />
<p class="mt-2 text-sm font-medium text-gray-700">Drop your image here</p>
<p class="text-xs text-gray-500">PNG, JPG, WebP up to 5MB</p>
</div>
</x-aura::file-upload>
See more examples and every variant in the File Upload documentation.