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

Hi!

@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>