File Upload

This component is powered by Livewire`s file upload. Please, first check its docs to proper setup file uploads before using this component.

By default, this component includes:

Progress indicator.
Validation message.

In order to see the progress indicators on localhost enable Fast 3G on Developer Tools. Remember to switch it back!

Basic

@php                            
    $photo = $this->photo;      
@endphp                         
<x-form wire:submit="save">
    <x-file wire:model="photo" label="Picture" hint="Hi!" accept="image/png, image/jpeg" />
 
    <x-slot:actions>
        <x-button label="Save" type="submit" class="btn-primary" spinner="save" />
    </x-slot:actions>
</x-form>

Default slot

You can override the file input's default button by using the custom slot.

@php                            
    $photo2 = $this->photo2;      
@endphp                         
{{-- Alternative loading. Notice the `wire:loading` + `wire:target` combination  --}}
<span wire:loading wire:target="photo2" class="loading loading-spinner"></span>
 
{{-- Image preview --}}
<img src="{{ $photo2?->temporaryUrl() ?? '/empty-user.jpg' }}" class="h-16 mb-5" />
 
<x-form wire:submit="save2">
 
    {{-- Use `hide-errors` to hide inline validation erros --}}
    {{-- Use `hide-progress` to hide default progress indicator --}}
    <x-file wire:model="photo2" accept="image/png, image/jpeg" hide-errors hide-progress>
        Click here to edit
    </x-file>
 
    <x-slot:actions>
        <x-button label="Save" type="submit" class="btn-primary" spinner="save2" />
    </x-slot:actions>
</x-form>

Custom progress

If for some reason you want to manage the upload progress use the following dispatched events by Livewire upload events.

Keep console output open while uploading.

<p>
    Keep console output open while uploading.
</p>
<x-form wire:submit="save3">
 
    {{-- Use `hide-progress` to hide progress bar --}}
    <x-file
        wire:model="photo3"
        hide-progress
        accept="image/png, image/jpeg"
        @livewire-upload-start="console.log('started photo3', $event.detail)"
        @livewire-upload-progress="console.log('progress photo3', $event.detail)"
        @livewire-upload-finish="console.log('Finish photo3')"
        @livewire-upload-error="console.log('error photo3')"
    />
 
    <x-slot:actions>
        <x-button label="Upload" type="submit" class="btn-primary" spinner="save3" />
    </x-slot:actions>
</x-form>

mary

Sponsor