Chunking Large Uploads in Inertia
This episode is for members only

Sign up to access "Chunking Large Uploads in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
09. Pausing uploads

Episodes

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

Transcript

00:00
Okay so before we look at pausing we need to figure out first of all how we actually pause this so this is going to pause this at the latest chunk and second of all we need to work out how we can tell if this is paused because we need to switch over the pause and resume buttons so when I'm working with libraries like this if I'm not looking at the documentation I'll just go
00:19
ahead and dump this out on the page just so I can see this or of course console log it out so just at the top here let's go ahead and dump out our uploader we'll trigger an upload and see what's in there so let's go ahead and choose a file and we will hit upload and here we go so if we look in here we've got this paused property and we can access this directly with a method to
00:43
check whether this is paused or not so let's go and just say uploader and paused and let's just take a look at this so we should and of course this isn't going to work because we don't actually have an uploader instance so let's go down here and just set this inside of where our buttons are and let's take a look so if we choose that file again hit upload we get false great so we have
01:08
a method that we can invoke to actually pause this and resume this so really all we need to do now using this state and using the pause and resume method is just build out the buttons and show one depending on the state so we'll go ahead and create out another button in here and we'll pull these down a bit we'll call this pause and when we click on this we want to say
01:29
state uploader and pause that will actually pause this so it will wait for the next chunk to upload but it won't update or upload any subsequent chunks so we want to show this if it's not paused so we're going to say if state uploader paused and check if it's not paused to show that okay so i'm just going to go ahead and add some styles to around here so i'm going to say
01:51
item center and we'll say a space x of two and let's go ahead and choose a file hit upload and i'm going to click pause so there we go you can see that's disappeared because now it is paused we can swap that out for the resume button but you can see that no further chunks are now being uploaded it waits for the last one and then subsequent ones are just not uploaded so now
02:14
we're just going to create another button which is the exact opposite of this and we should be good so i'm going to move these actually just before cancel i think that kind of makes sense and let's duplicate this button down and just swap this over so if it is paused we want to show this but now we want to call resume and of course we're going to change the button label over to resume as
02:34
well so that it should be it so let's go ahead and choose another file hit upload and i'm going to pause that the last chunk stops then we can hit resume and we can continue and of course we can just keep pausing this if we want to so again really really simple to implement pause and resume functionality with this library and just swapping over our ui depending on the state

Episode summary

In this episode, we dive into adding a pause and resume feature to our file upload system. First, we look at how the uploader handles pausing. We discover a handy paused property we can check, and also learn how to use the methods to pause or resume uploads. This is super useful because we want the UI to show "Pause" or "Resume" buttons depending on the current upload state.

We go through the process of adding these buttons: when the uploader isn't paused, we display a "Pause" button, and when it is paused, we flip it to "Resume". We wire up the actual pause and resume methods behind the scenes and test everything out, watching how the upload stops at the end of a chunk and then resumes right where it left off.

You'll see how easy it is to swap out the UI based on the state, and there are a few styling tweaks along the way to keep things tidy. By the end, we have working pause and resume controls for our uploads, and you’ll see just how seamless this is with the library we’re using.

Episode discussion

No comments, yet. Be the first!