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>