Build a Livewire Drag & Drop Uploader
This episode is for members only

Sign up to access "Build a Livewire Drag & Drop Uploader" right now.

Get started
Already a member? Sign in to continue
Playing
06. Storing files

Episodes

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

Transcript

00:00
We've got a bunch of these temporary uploaded files, but we want to move them and store them somewhere.
00:05
It's always a good idea to also store these in your database so you have a nice, easy reference to them that links the file path that you've moved them to. So the first thing that we're going to do
00:15
is go ahead and create out a file model and, of course, a database table. So let's make out a file model and create a migration alongside of that as well.
00:25
So we're going to go ahead and open up the Create Files Table Migration, and we'll just try that again. There we go. And if we head over to here,
00:36
we don't really need to store too much about this. We probably want to store the original file name so we can identify it. So file name is good.
00:44
And we want to store the path that it's stored either on our local file system or a remote file system like Amazon S3. So let's go and migrate these changes,
00:55
phpArtisan Migrate, and we're done. So what we can now do is over in this component here, we've got a list of these files, which we can access either here
01:03
or directly from the property, and we can go ahead and iterate over them and create a file record in the database for these, and at the same time,
01:11
upload them to a path in our file system. So we're going to go ahead and, because this is an array, collect these up, the Laravel collection.
01:20
That means that we can easily then just use each to iterate over them. You can use a for each here if you want to. And for each of these, we have a file.
01:28
So that's now iterating through each of the files that we have uploaded. And now we can go ahead and create our file model for each of these.
01:37
So what kind of things do we want in here? Well, we want the file name, and let's just pull in a model really quickly, app models file.
01:44
And the name of this, and we're going to assign it here at the same time so we can use it again in a moment, is the file.
01:51
And remember, this is a temporary uploaded file, which we saw dumped earlier. That contains a method in here called get client original name.
02:02
So that's the name of the file that we uploaded. So for example, video.mp4. So next is the file path, which at the same time,
02:11
as assigning this to the record that we're creating in the database, we can also store this file. So if we again open up the temporary uploaded file,
02:19
we have this store as method where we can add in the path, the name of this, and then any options.
02:25
So for here, we're going to go ahead and say file, store as, we're going to store it in this files directory, which don't confuse with the name as our property,
02:35
and then we're going to pass in the name. So that's the name of the file that we want to call it as. So we're basically putting this file into a files directory on our local file system,
02:44
and we are calling it by the name that we've assigned here, which is the original name of the file. So you could get conflicts here technically. You may want to just sort of add on
02:55
maybe an MD5 hash of the file name if you want to. It's entirely up to you how you name these. Just do something a little bit different. Okay, now that should be it.
03:06
So if we head over to our database, we've now got this files database table. Let's just try this with one file and just see what happens.
03:12
So we'll just upload this introduction file. And yeah, sure enough, over on that file model, if we just open this up,
03:19
we can either unguard this or we can go ahead and set the fillable properties in here to file name and file path, like so. Okay, let's try that again.
03:31
Hit upload a file, hit that, and we should be good. So nothing has happened. We're not seeing anything happen at the moment,
03:37
but what should have happened is this has been created in the database with the original file name that we gave, and we've got the file path just here.
03:45
So let's figure out where this has been stored first of all. So if we just head over to our storage here under app, right next to Livewire temp, we've got this files folder,
03:54
which is if we just head back over to our uploader, the name that we gave here, and we've got the file in there. So that's been uploaded and we can now technically,
04:03
once we've symbolically linked our storage directory to public, we can download them, which we're gonna look at in a couple of parts time.
04:10
So this is gonna work with multiple files as well, whether we drag and drop, it doesn't really matter. So let's just choose a video four and five here. And if we head over, there we go,
04:19
four and five have been uploaded. So really straightforward. They're now uploaded. They're stored in the database so we can list them
04:26
and show the user which files have been uploaded. And of course we have a reference over in the database to the location of these so we can re-download them when we need.
9 episodes• 43 mins

Overview

Build a multiple file drag-and-drop uploader with Livewire and Alpine.js.

Using Alpine and Livewire’s JavaScript API, we’ll directly hook into the JavaScript drop event and kick off the upload progress, validating files and showing a progress bar along the way.

So, if you need drag-and-drop uploading in your Laravel project, this course has you covered!

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

Episode discussion

No comments, yet. Be the first!