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
11. Pausing and resuming uploads

Episodes

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

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.

Episode summary

In this episode, we dive into adding simple pause and resume functionality for uploading files. You'll see just how easy it is—we don't even need any extra methods or complex logic: everything is handled right inside our template.

We start by adding a single button to the interface, which will act as both the pause and resume control, depending on the current state of the upload. Instead of juggling different buttons or using conditional rendering tricks, we keep it straightforward with just a single toggle.

First, we hook up the button to pause the uploader when clicked. Then, once that's working, we add logic so that clicking it again resumes the upload if it's currently paused. The uploader's state (paused or not) is tracked using a simple Boolean value, so it's super clear when to pause or resume.

Finally, we tidy things up by updating the button text dynamically to say "Pause" or "Resume" based on what's appropriate, making it intuitive for users. You'll see how quick and clean this is to do with Alpine.js, and how seamless pausing and resuming uploads can be with the right setup.

Episode discussion

No comments, yet. Be the first!