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
11. Pausing and resuming uploads
01. Introduction and demo
3m 4s
0%
02. Getting a file
5m 19s
0%
03. Starting the chunked upload
5m 22s
0%
04. Showing progress and handling success
5m 3s
0%
05. Handling chunks on the server
7m 20s
0%
06. Responding with the uploaded file
4m 43s
0%
07. Feeding back into Livewire
6m 54s
0%
08. Storing the file
3m 2s
0%
09. Refreshing a list of uploads
3m 29s
0%
10. Cancelling uploads
3m 3s
0%
11. Pausing and resuming uploads
2m 32s
0%
12. Changing over the file path for security
2m 11s
0%
13. Using nextTick to fix a rendering issue
1m 15s
0%
Transcript
00:00
So pausing and resuming uploads are incredibly straightforward, so much so that we could just do this all within our template and not have to create any other methods for this. So what we're going to do is start out with a button and we're just going to have one button in here just so we can easily toggle the state between these two. And we don't have to rely on creating templates or using X show to hide these buttons.
00:23
So in here, we're either going to have cancel or we're going to have pause or we're either going to have resume. So this button again is going to be a type of button and we need to decide when to show this. So let's implement the kind of pause functionality first and then see what happens. So I'm going to say X on click.
00:40
And with this, what we can do is say uploader dot pause. That is it. That's all we need to do to actually pause and upload. Let's just try this out really quickly just to make sure it's working and then we'll get the resume functionality added in.
00:52
So when I click on that, there we go. The last chunk finishes, of course, and then it just stops. And then we can eventually resume it. Okay.
01:00
Let's go and just add a class of text blue 500 to this and then let's just fill this entire thing in. So when we click on this, we want to either pause it or resume it depending on the state of the uploader. Now we can grab the state of the uploader with uploader dot pause. This will be a Boolean.
01:18
It will be, of course, true or false depending on if it's paused or not. So if it isn't paused, so let's go sort of in reverse. We want to, when we click on this, say uploader dot pause. And then otherwise, we want to say uploader resume.
01:34
So pause it or resume it depending on the current paused state of this. So let's go over, choose a file, and let's pause this and then let's resume it. There we go. Works very, very easy.
01:48
But of course, we want to change over the text here so it makes a lot more sense. So we can do this in Alpine with X text. And again, we can just use the same condition here. So we can take this and if it isn't paused, we want to show pause.
02:01
We can do that with backticks here. Otherwise, we want to show resume and that should be it. We could get rid of the text in here if we wanted to or just leave it as the default pause. Okay, let's try this out.
02:13
So when I upload a file now and I hit pause, that condition switches the text over. And of course, when I click on this, it's just going to resume the file and carry on uploading. So there we go. Very, very easy to pause and resume uploads specifically with this library, but very easy to do either way.
13 episodes• 53 mins•1 year ago
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
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!