Playing
02. Basic starter app

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.
10 episodes 46 mins

Overview

Effortlessly handle large file uploads in your Inertia/Vue apps with chunked, resumable uploading.

We’ll cover the entire upload process for the client and server, display a progress bar, then add the ability to pause, resume and cancel uploads.

From there, you’ll be able to handle huge file uploads anywhere in your applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.