Chunking Large Uploads in Inertia
Playing
02. Basic starter app

Episodes

0%
Your progress
  • Total: 46m
  • Played: 0m
  • Remaining: 46m
Join or sign in to track your progress

Transcript

00:00
Okay let's kick things off with a really simple app that just lists out a bunch of files from
00:04
our database. If you've already got an app that you are ready to start implementing this functionality into or you don't want to follow along, feel free to skip this episode. So I've gone ahead and created out an Inertia app with Laravel Breeze and I've gone ahead and run the default migrations. That's pretty much all I've done here. So we're going to head straight over
00:23
to the dashboard page and we're going to reduce the width of this container just so everything fits in a little bit better and we'll just head over and start to create our model. So let's go ahead and make out a model in here and we're just going to call that file and of course create a migration alongside of that as well. So let's open up our create files table migration and
00:43
we'll keep this super simple. We want this to be attached to a user so let's go ahead and introduce a user id. We'll constrain this and then we'll keep this super simple and just have a string in here with the file path. So when we go ahead and upload a file we will attach it to that user, we'll upload the file and at the same time grab the file path and store it back in the database.
01:05
Okay so let's go ahead and run our migrations on this. We'll head straight over to the user model and we'll create out a relationship here and let's go ahead and return this has many and pass that file model in and then we're going to go over to the web routes and the moment we have this dashboard closure. So I'm actually going to go ahead and get rid of
01:28
this and we'll change this over to a controller. So let's go ahead and make out a controller and we'll just call that dashboard controller. So let's go ahead and pull this directly into here, we'll head over to that dashboard controller, create out an invoke magic method and we'll use the inertia helper to render out that dashboard view and nothing should have changed here but we
01:51
now have a controller to work with. Okay let's pass these files down within this controller, so we'll go ahead and grab the request here and let's just pass these down as files. Now normally I'd create out an API resource here to structure this data but we want to kind of get through this to the upload functionality, so for now I'm just going to go ahead and grab the currently
02:11
authenticated user, grab those files, scope them by the latest and then go ahead and grab them. So that will just JSON encode them and send them down to our dashboard view which we can use to output them. So at the top we'll go ahead and define our props here and then files are now going to be an array and then down here within this section we're just going to go ahead and list
02:32
through them. So let's create out a div in here, we'll do four on this and we'll say file in files, make sure we key these by the file id and then we're just going to output the file path and we can wrap this in a template to add an if statement to it, so let's do that in here and then we'll just add a vif and say files length and then down here we'll create out
03:00
another template, say v else and then we'll say no files yet. So at the moment when we head over we see no files yet, let's hop over to the database, over to our files and just create out a test one, so we'll assign this to my user, we'll just say abc, fill in the created at and we'll duplicate this down and just create another one just so we can see this working and there we
03:24
go we've got a list of files. So now for the rest of the course we're going to implement the upload functionality at the top here and with inertia specifically when we reload just the files we'll get the file in here once it's been uploaded. So let's go ahead and get ready these out of the database and we're ready to go.

Episode summary

In this episode, we kick things off by putting together a really basic starter app. If you’ve already got your own app and don’t feel like following along at this stage, feel free to skip ahead—but if you want the full walkthrough, stick around!

We start with a fresh Laravel Breeze project using Inertia and set up the foundation for a simple file listing app. The goal for this episode is to get a basic dashboard that just shows the files from our database.

We keep things nice and simple: create a File model and migration, set up a migration with a user_id (for associating files with a user) and a path field to record where each file is stored. After running the migrations, we establish the relationship on the User model so users can have many files.

From there, we swap the dashboard view from a closure route to a dedicated controller (to keep things organized as the app grows). Instead of getting fancy with resources or API formatting, we just grab all of the authenticated user’s files, order by latest, and pass them straight down to our dashboard view.

On the front end, we loop over the files and show a simple list, or a message if there aren’t any files yet. We wrap up the episode by quickly adding some test data in the database to make sure everything’s working, and confirm that the file list is being displayed.

And that’s the setup! The rest of the course will take things further by building out the actual upload functionality, but now we’ve got a working base to build on.

Episode discussion

No comments, yet. Be the first!