Published on

Upload images and files using Laravel Livewire


Consider we have a LiveWire profile component used to update the logged-in user avatar

namespace App\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
use Livewire\Attributes\Validate;
class UploadPhoto extends Component
    use WithFileUploads;

    public $avatar;

    public function save()
        $filename = $this->avatar->store(path: 'avatars', 's3'); // uploading the file to aws s3

            'avatar' => $filename

    public function render()
        return view('livewire.profile');

Then, in component's view:

<form wire:submit="save">
    <input wire:model="avatar" type="file" name="avatar">

    <button type="submit">Change photo</button>

That's it, try it if you don't believe :)

To dive in more, head over to the official documentation.

Happy coding!