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

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
10 episodes 46 mins

Overview

Effortlessly handle large file uploads in your Inertia/Vue apps with chunked, resumable uploading.

We’ll cover the entire upload process for the client and server, 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!

Comments

No comments, yet. Be the first to leave a comment.