This episode is for members only

Sign up to access "Chunking Large Uploads in Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
08. Storing the file

Transcript

00:00
OK, this might be pretty obvious to you if you've ever stored an uploaded file within Laravel or LiveWire, but let's go ahead and run through the process of getting this stored in the database
00:07
and then later we'll look at how we refresh the list of files we currently have. OK, we'll obviously start with a model. So let's go and make out a file model with the migration. Let's go over to the create files table migration and fill this in really quickly.
00:22
So we want this to be attached to a user. Let's add in a foreign ID with the user ID and constrain this. And we want to store two things about the file. We want to store the original file name and then we want to store the file path
00:37
as it's been stored on our file system, wherever that is. So that's pretty much it for now, I think. Let's go and run our migrations here. Two more things to do.
00:46
Let's head over to the file model. And I'm just going to go ahead and set guarded to false just so we don't need to implement fillable. And then we're going to hop over to our user model and we're going to create out the very basic relationship here with them files.
01:01
So let's return this has many and file and we should be good to start storing this. OK, so on our on success, what we now want to do is grab the currently authenticated user. However, we're doing that access the files relationship and then we want to go ahead and create this file. So into here, we're going to pass in the file name.
01:25
Now, we've now got an instance of an uploaded file, which we pushed over from here, which means we can access any of the information about this file. So for the file name, we can just say file get original client name and that will do. And then for the file path, this is where we want to store this file in our file system at the same time as receiving the location.
01:49
So remember, we've not stored the file technically yet. The chunk has stored, but this is like a sort of temporary file that we've created. So what we can now do is say file store as and we can store this in a location. So we could say store that in an uploads directory and maybe we wanted to just generate out a UUID for the file name.
02:10
And maybe we wanted to process this after it's done or do something with it. We're just going to add a UUID for now just to keep things simple. So that should be it. We've hooked everything up together.
02:20
We should be able to just upload this file and see it going to that new location. So let's choose one of these files, hit upload, wait for that to finish and it's done. So if we head over to our editor, we should now have an uploads directory with that file in there. Now, I didn't give that an extension, but if I just rename this with MP4 at the end, as you can see,
02:41
this is the fully uploaded video that had previously been chunked, put back together and then placed into this new location. So our entire end-to-end flow of uploading files and storing them in the back end is working really nicely. But we've got a couple of other nice things that we want to add to this. Let's carry on and do all of that.
13 episodes 53 mins

Overview

Effortlessly handle large file uploads in your Livewire apps with chunked, resumable uploading.

We’ll cover the entire upload process, 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!

Episode discussion

No comments, yet. Be the first!