Upload images and files using 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

    auth()->user()->update([
        '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">

    <button>Change</button>
</form>

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

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

Happy coding!