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
06. Responding with the uploaded file

Episodes

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

Transcript

00:00
So feeding this data back into the client is going to be pretty straightforward. But I'm going to do my best to explain
00:05
why we need to do it this way. Now, let's just go back before we do anything to our upload component here. And we know that we are sending all of this data
00:13
down to an endpoint. Now, this is a LiveWire component that we're referencing within our routes. But it's not going to work like a LiveWire component.
00:22
As I've said a couple of times already, this may as well just be a standard controller. Now, the reason that we can't do this in any other way is because when we work with LiveWire
00:32
inside of this component, ideally what we'd want to do is something like wire call and then pass in a chunk. So we would like to do that.
00:40
That would be the easiest way. But because the library that we're using to upload this only allows an endpoint, we can't do this. We can't just take the chunk data for every request,
00:51
for every chunk that we send, and then pass this into LiveWire. That would be ideal. But most of the front-end packages
00:57
that you'll find to chunk stuff and send them down require this data to just be sent to an endpoint. Now, ideally, what we'd really want to do in here is say something like this dispatch
01:08
and then say something like success and then pass in the file path into here. But we can't do that because we're passing this down like it's a normal controller.
01:17
And that means that over in our upload component, we can't then listen to this event. So we can't do something like on success and then create out some sort of handler here to handle this.
01:29
It's just not going to work. So what we want to do is inside of here, return a response, which will then on the client side allow us to check that it's finished.
01:40
And then from the client side, we can then call a LiveWire method. Let's go through this and see how this works. So from here,
01:49
because we're treating this like a normal controller, I'm just going to return a JSON response in here with a couple of bits of information about this file. So let's start with just the file itself.
01:58
And we're just going to output the complete path to this file so we can send that through to the client side. So I'm going to say save get file and then I'm going to use get real path.
02:08
So let's get rid of this comment here and let's try and pick this up on the client side. So over on the client side, we've got a couple of events here like on success, on progress.
02:17
Unfortunately, with the success event, it doesn't give us back the final response. What we need to do here is hook into each of the chunks as they're uploaded and check each of the chunks
02:28
to see if we're getting this response back. So we're going to go ahead and say on chunk success, and let's go and implement the callback for this. We'll get back a response in here
02:40
and let's just console log out the response detail. So that will contain an event with the detail with what we need. So let's just try this out.
02:48
So I'm going to go ahead and just upload a file here, hit upload, and yeah, sure enough, we've got an error here. Let's just have a look. Uploader, change that over
02:57
and we'll choose this small file, hit upload, and there we go. So every chunk that's sent is now giving us back the information from the server and the response.
03:06
So obviously for the first one, we've got a body of null because the entire file hasn't been completed and pieced together yet, but the last chunk has got that body in
03:15
with the location of the file. So now on the client side, we can pick that up and then we can tell this live wire component directly from Alpine.
03:24
This file is ready. Here is the file path. Do something with it. And that is where we start to come back
03:30
into the reactivity of this. So let's go ahead and implement the ability to check if this is in there first of all, and then we'll do something with it.
03:39
So let's go ahead and say response detail and we had another response object in there with the body. If that's not available, we're just going to return. We don't want to do anything.
03:48
So let's do an early return. Otherwise, let's go ahead and console log out what we've got here and see what we get just so we can work with this and do something with it.
03:59
So let's choose another file, hit upload. We'll wait to the last chunk and there we go. So we actually have a sort of string in here, which we need to put back into an object
04:07
that we can make use of. So to do that within JavaScript, we're going to use JSON parse. And because we've parsed that, that's now an object.
04:16
We can then access the file that we're parsing So let's just console log on that, make sure we have the right thing and we're good to go. So let's hit upload and just wait for that to finish.
04:27
And there we go. So that is the full file path now to the completely uploaded thing. And that is what we want to use
04:36
to pass back through to our live wire component to get working. So let's head over to the next episode and see what we can do with this now.

Episode summary

In this episode, we focus on how to handle responses from the server when uploading a file in chunks. We kick things off by explaining some of the challenges faced due to the limitations of common front-end chunk uploading libraries. Basically, while it would be ideal to have direct event-driven communication with Livewire, these uploaders only allow sending the data to a specific endpoint, so we need to adjust our approach.

We then jump into the code both server-side and client-side. On the backend, the approach is to return a JSON response for each chunk, especially containing the final file path once the upload completes. On the client-side, we listen for chunk success events and parse the server's response. The key move here is grabbing the file's path from the last chunk's response and then passing that into our Livewire component to keep that reactivity.

You'll also see a bit of troubleshooting as we check that our logic works and that the client is getting the data we want upon the successful upload of a file. It's all about bridging the gap between the chunked upload process and our Livewire-powered interface, laying the groundwork for the next episode where we'll make even better use of this data.

Episode discussion

No comments, yet. Be the first!