Skip to content

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.

Basic Usage

Trascina qui o clicca per selezionare

<x-aura::file-upload
    label="Upload File"
    name="file"
    wire:model="file"
/>

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.

Examples

Avatar Upload with Preview

Trascina qui o clicca per selezionare

<x-aura::file-upload
    label="Profile Picture"
    name="avatar"
    accept="image/*"
    :maxSize="2048"
    :preview="true"
    wire:model="avatar"
/>

@error('avatar')
    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
@enderror

Document Upload

Trascina qui o clicca per selezionare

<x-aura::file-upload
    label="Attach Document"
    name="document"
    accept=".pdf,.doc,.docx,.xls,.xlsx"
    :maxSize="10240"
    :preview="false"
    wire:model="document"
/>

Multiple File Upload

Trascina qui o clicca per selezionare

<x-aura::file-upload
    label="Gallery Images"
    name="photos"
    accept="image/jpeg,image/png,image/webp"
    :multiple="true"
    :maxSize="5120"
    :preview="true"
    wire:model="photos"
/>

Livewire Form Integration

<!-- Blade view -->
<form wire:submit="save">
    <div class="space-y-4">
        <x-aura::input label="Document Title" name="title" wire:model="title" />

        <x-aura::file-upload
            label="Upload PDF"
            name="pdf_file"
            accept=".pdf"
            :maxSize="20480"
            :preview="false"
            wire:model="pdfFile"
        />

        @error('pdfFile')
            <p class="text-sm text-red-600">{{ $message }}</p>
        @enderror

        <div wire:loading wire:target="pdfFile" class="text-sm text-gray-500">
            Uploading...
        </div>

        <x-aura::button type="submit" wire:loading.attr="disabled" wire:target="pdfFile">
            Save Document
        </x-aura::button>
    </div>
</form>

// Livewire component
use Livewire\WithFileUploads;
use Livewire\Component;

class DocumentUpload extends Component
{
    use WithFileUploads;

    public string $title = '';
    public $pdfFile;

    protected function rules(): array
    {
        return [
            'title' => 'required|string|max:255',
            'pdfFile' => 'required|file|mimes:pdf|max:20480',
        ];
    }

    public function save(): void
    {
        $this->validate();

        $path = $this->pdfFile->store('documents', 'public');

        Document::create([
            'title' => $this->title,
            'path' => $path,
            'size' => $this->pdfFile->getSize(),
        ]);

        $this->reset(['title', 'pdfFile']);
        $this->dispatch('toast', type: 'success', message: 'Document uploaded.');
    }
}

Multiple Images with Existing Previews

<x-aura::file-upload
    label="Product Images"
    name="images"
    accept="image/*"
    :multiple="true"
    :maxSize="5120"
    :preview="true"
    wire:model="newImages"
/>

@if($existingImages)
    <div class="mt-3 flex flex-wrap gap-2">
        @foreach($existingImages as $image)
            <div class="relative">
                <img src="{{ Storage::url($image->path) }}" class="h-20 w-20 rounded object-cover" />
                <button
                    type="button"
                    wire:click="removeImage({{ $image->id }})"
                    class="absolute -right-1 -top-1 rounded-full bg-red-500 p-0.5 text-white"
                >
                    <x-aura::icon name="x-mark" class="h-3 w-3" />
                </button>
            </div>
        @endforeach
    </div>
@endif

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>

Accessibility

  • The drop zone is keyboard accessible via a hidden <input type="file"> triggered by Enter or Space.
  • The label is associated with the file input via for/id attributes.
  • aria-describedby links to hint text showing accepted formats and size limits.
  • Upload progress is announced via aria-live="polite" region.
  • Preview images include alt text with the file name.
  • Drag-and-drop provides visual feedback (border color change) when files are dragged over the zone.
  • Error messages are linked to the input via aria-describedby.