DEV Community

File Upload in Livewire v 1.2.0

File handling is very hard to handle, specially if you are using javascript to send file and then handling on laravel/php side.

With new Laravel Livewire v1.2.0, there is a new way to upload file with zero configuration (Yes no config needed)

Check this video for extensive explaination of every bit of new file upload.

Before moving forward, I can tell you that this is soo easy that you may thing there is some magic behind it, but not its super simple.

Note: If you are new to laravel livewire, check this full livewire course link at the bottom of this post.

First, add the WithFileUploads trait to your component.

use Livewire\Component;
use Livewire\WithFileUploads;

class UploadPhoto extends Component
    use WithFileUploads;

    public $photo;

    public function save()
            'photo' => 'image|max:1024', // 1MB Max


then just use wire:click on your input field to handle any file upload.

<form wire:submit.prevent="save">
    <input type="file" wire:model="photo">

    @error('photo') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Photo</button>

That's it.
I told you, it is super simple.

Livewire full video course

For more information and awesome tutorials, follow me at

watch tutorials on

Discussion (1)

neeraj1005 profile image
Neeraj Singh

Sir can you tell me how can I perform autoload image without form or submit button? How can I perform onload event in livewire...?