In this episode, we dive right into handling file selection in our uploader. We'll set it up so that when you click and choose files via the upload input, or (eventually) drag and drop them, the event gets picked up in JavaScript.
There are a couple of different ways to handle file uploads in Livewire, but instead of using Livewire’s built-in x-model
binding, we use Alpine.js to catch both "click-to-upload" and drag-and-drop in the same handler. Alpine is already included with Laravel Breeze, so we’re good to go.
We make the whole uploader an Alpine.js component using x-data
, define a simple handler, and wire up an event listener for changes. This handler grabs the files off the event target whenever a user selects or uploads files and prepares them for upload.
On the backend side, we update our Livewire component to use the WithFileUploads
trait and set up an array property to hold the files. Then, with the Livewire JS API (this.uploadMultiple
), we pass our selected files from Alpine to Livewire.
We also discuss handling validation errors (like getting a 422 error) and how to adjust validation rules in Livewire’s config to allow bigger uploads. By the end of this episode, we’ve made the connection between file selection and passing those files on to Livewire, ready for actual uploading.
Next up: we’ll tackle the drag-and-drop part and unify both upload methods with the same logic!