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
07. Feeding back into Livewire

Episodes

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

Transcript

00:00
OK, so let's go ahead and hook this back into Livewire so we can let our component know that this is our new uploaded file. Now, one thing I will say before we carry on is that the file path that we're passing back to the client side reveals a lot about how our server is set up.
00:16
Just to give you another demo of that, let's go and upload another file and let's just take a look at this. And you can see that this reveals a lot about where this file is actually stored. So what we're going to do is update that a little bit later.
00:27
But it's really important to know that we don't want to just be passing this entire data structure to our client. OK, so what do we want to do here? Well, because we're now working within our Livewire component,
00:39
we can now call a method in here to pass this through to our actual Livewire component to tell it that it's done. So from here, we've not really hit any Livewire methods, but that is where we're going to do this and basically tell this component
00:53
the upload is complete. Here is the file. So kind of like we would do when we're normally uploading a file. OK, so let's go ahead and say wire call. So this will access the Livewire component here, this upload
01:06
upload Livewire component. And we're just going to call this anything like handle success. And then in here, we want to pass through as much information about this file as we can. So I want the original file names for the client name of the original file.
01:22
You might not need that, but if you do, we want to pass that through. And second of all, I want to pass through the location of the newly uploaded file as a second argument. And then we can pick these up in this handle success method.
01:33
So let's go up to our upload component and let's create out the handle success method inside of here. And let's take in the file name and the path. Let's die dump on them.
01:47
Now we're back into our Livewire component. We can do that. So let's die dump on the name and the path and just see what happens. So let's go and choose another file here and let's hit upload.
01:58
Once that's finished, we've let our Livewire component know now, kind of ignore this error is just because we're dying and dumping. We've got the name of the original file and we've got the path of the file. So we're back to the point now where Livewire knows about this file.
02:11
And now we can just do anything in here. Now, what I kind of want to do when we when when we started this, we said we wanted to make it as flexible as possible. Now, I don't want to do the storage of the file
02:22
and the attaching of the user directly inside of this handle success method, because that means if we want another uploader somewhere else on the site, we're going to have to duplicate everything we're doing in here. So what I'm actually going to do is go ahead and create out an entirely new
02:35
component, extend this base upload component, which I wouldn't normally recommend doing. But we're going to do this in this instance, and then we can sort of forward the fact that this was successful over to that individual component
02:47
and handle it in different ways. So let's go ahead and see what I'm talking about. So I'm going to go ahead and create out a new component here, and I'm going to call this specific upload.
02:56
Obviously, this could be something like video upload or avatar upload, whatever you wanted it to be. So this specific upload component is now going to go over on the dashboard and replace this.
03:08
Like so, but when we come over to our specific upload component, we're going to get rid of the render method and we're going to extend that base upload component. Now, just by doing this, nothing will have changed.
03:20
We still have this functionality on here. We can still upload files and everything still works. But what we can now do is we can forward the data here over to any children that extend this component.
03:34
So by that, I mean, I can say something like this on success. Now, unfortunately, what we can't do from here is emit events. Even if we could emit events, we wouldn't want to be passing through a massive uploaded file.
03:47
So on success, what do we want to pass through to here? Well, over on my specific upload component, when I implement this on success method, I don't really want to be getting in the name of the file and the path.
03:59
I want an uploaded file class, which I can use to just easily save this file. So we're going to do all the hard work behind the scenes. And then this on success method will just receive an uploaded file in
04:11
and we can just store it. So on success, what do we want to do? Well, we want to new up an uploaded file like so. Let's just check what we need for this in the constructor,
04:22
which is part of the symphony uploaded file. So let's have a look. We need a path, an original name and optionally a MIME type. So we're going to ignore the MIME type.
04:31
But if you do want that, you're going to want to pass that down from the client side to the back end. So uploaded file, what do we want to do? We want the path and we want the name.
04:39
So that's the original client name. And that is the path of where this is located on our file system. So now that we're invoking this on success method on the child class over here in this specific upload, we will get through an uploaded file
04:55
and then we can just do something with that. Now, for now, let's just die dump on this to see that this is all coming through properly and then we'll look at storing it. So let's go and choose a file here.
05:05
Let's choose this one. Hit upload. Wait for that to finish. That then forwards over to a specific upload component. And we have all of this data
05:14
that we can use to store this file really nicely. And for context, the uploaded file allows us to do things like store as, which is really helpful. And that will just put this within the file system of our choice.
05:25
OK, so now that we've got this handler, we want to do one more thing. And this isn't strictly necessary. But for example, if you were creating out a new upload component for another type of file or somewhere else on your app,
05:39
you kind of want to be reminded that you want to implement this on success callback. So we're going to create out a mount lifecycle hook method inside of here.
05:50
And we're going to check if this method exists or if it doesn't exist. So we'll say method exists this on success. And if it is not, then we're going to go ahead and throw a new exception. That exception is a not implemented exception,
06:06
which is just a native PHP exception. And we're going to say an on success handler method is required or something like that. So by doing this, what that means is the next time you create
06:18
another upload component, which extends our base uploader, if you don't include on success, that's going to throw an exception and remind you to implement that completely optional. But this is really helpful if you are building something like a package.
06:31
OK, so I think we're pretty much done here. We've gone ahead and forwarded this back over to Livewire, which was the main goal here. Now that this file is complete and now we are doing that,
06:41
we're kind of treating this now like a normal uploaded file within our application, despite the fact we've been chunking it and storing it on the back end. So let's go ahead and look at how we save this file out and then we're done.
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!