Chunking Large Uploads in Livewire
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

Episodes

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

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.

Episode summary

In this episode, we set up everything needed to store uploaded files in our Laravel (or Livewire) app. Even if you've done file storage before, we walk through all the details, including creating the necessary model and migration for our files. We make sure the file table is linked up with the user who uploaded it, storing both the original file name and the path where the file lives on the server.

Once the database side is ready, we update our models with the right relationships so each user can have many files. Then, we head to the upload logic. On a successful upload, we grab the file details—like its original name—and generate a unique name for storage (using a UUID). We store it in an uploads directory and keep track of where it ended up in the database.

Finally, we try uploading a file, check that it actually appears in our uploads directory, and confirm the database entry looks good. The upload process is now end-to-end: chunked upload, recombined, saved on disk, and linked in the database! There are still a couple of improvements coming up, so stay tuned.

Episode discussion

No comments, yet. Be the first!