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!



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

Default slot

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

$photo2 = $this->photo2;
{{-- 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-button label="Save" type="submit" class="btn-primary" spinner="save2" />

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.

Keep console output open while uploading.
<x-form wire:submit="save3">
{{-- Use `hide-progress` to hide progress bar --}}
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-button label="Upload" type="submit" class="btn-primary" spinner="save3" />