Upload images and files using Laravel Livewire

Saleem Hadad • June 11, 2020

web-development laravel livewire

This article has been updated for the latest content

Recently I wrote this article with a quick workaround on implemeting file upload in LiveWire. Fortunately, LiveWire just released the official support for file upload functionality in a very simple way #958. Let's see how.

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

class Profile extends Component
  use WithFileUploads;

  public $avatar;

  public function save()
    $this->validate(['avatar' => 'image']);

    $filename = $this->avatar->store('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.prevent="save">
    <input wire:model="avatar" type="file" name="avatar">


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

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

Happy coding!

Subscribe to my monthly newsletter