File Upload in Livewire v 1.2.0

#laravel #php #javascript

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()
    {
        $this->validate([
            'photo' => 'image|max:1024', // 1MB Max
        ]);

        $this->photo->store('photos');
    }
}

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>
</form>

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

Livewire full video course