In this episode, we’re setting up the foundation for chunked file uploads in a fresh Laravel project using Laravel Breeze as our starter kit. We kick off by making sure everything’s ready—compiling assets with npm run dev
, migrating our database, and then tweaking the setup before adding Livewire. A key step is removing Alpine.js from our app.js, since Livewire will handle this for us to avoid duplicates.
Next, we walk through registering a new user and popping over to the dashboard. There, we tidy up the layout and build a new Livewire component specifically for file uploads. We drop a simple upload form directly into the dashboard, focusing just on single file input—nothing fancy yet!
Instead of using Livewire’s built-in file upload right away, we wire up the form to Alpine.js. This lets us grab the selected file using Alpine’s refs, making it nice and easy to grab the file in JS when the user hits upload. We make sure the file selection works, and show how to prevent submission if there’s no file chosen.
Why not just use Livewire’s wire:submit
and call it a day? The whole point is to get ready for chunked uploads. We explain that standard Livewire form submission just sends the whole file at once, which isn’t what we need. In the next episode, we’ll bring in a JS library to break the file into chunks for upload, and start passing those to our backend one by one.
By the end, you’ll have a clean, basic setup for capturing file input in the browser, ready to take it further with client-side chunking in the next step!