In this episode, we kick things off by setting up a brand new Laravel app using the Breeze starter kit with Inertia and Vue, which is a pretty chill way to get things rolling. The goal here is to create a foundation for uploading files (in this case, videos), so we walk through morphing the default dashboard into a slick upload page.
First, we tidy up the page so it looks like an upload area, resizing containers and preparing a dedicated spot for our upload form. Underneath, we'll be able to list all the uploads a user has made.
We then dive into creating a Video
model and migration. The model's set up to keep track of the video's owner (user), its title, description, file path (where the uploaded video lives), and whether it's been encoded or not. There's some discussion about making certain columns nullable, since info like the video path or description won't always be there immediately. We also hook up a relationship so a user can have many videos.
Next, we quickly scaffold the upload form. The actual file input is hidden and the visible part is a label styled as a drag-and-drop zone, allowing users to select or drag in multiple files. There's a quick touch on accessibility (using screen-reader-only
), and some flexible styling to make it look inviting and modern.
By the end, we've got a decent upload UI set up and the database ready to go. In the next episode, we'll handle those file selections and start building the upload logic!