In this episode, we're kicking off by previewing the drag-and-drop file uploader that we'll be building with Livewire. We start by highlighting how Livewire, together with AlpineJS, makes it super easy to hook into the backend with a neat JavaScript API—this way we can react to files being dropped on our interface and handle uploads smoothly.
We take a look at the uploader in action: first, just using a regular file picker, and then demonstrating with some video files. To give you a real feel for the progress bar, we slow down our network so you can see uploads happen in real time. Once files have uploaded, you’ll see the Livewire-powered list update dynamically without needing a page refresh.
We also try uploading multiple files at once and show that they appear right after uploading. And it’s not just clicking; you can drag and drop files too! Validation is built in, so only MP4 files are allowed, and we show what happens when the wrong type is uploaded—the error is caught and displayed instantly.
By the end of this episode, you’ll know exactly what we’re working towards: a modern, interactive uploader that you can integrate into your own projects or just follow along for the learning experience. Next up, we’ll start from scratch and set up a new Laravel project with Livewire to get building!