Multiple Drag And Drop File Uploading and Processing with Inertia
This episode is for members only

Sign up to access "Multiple Drag And Drop File Uploading and Processing with Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
10. Pausing and resuming uploads

Episodes

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

Transcript

00:00
Okay so we've just finished off cancelling files, let's go ahead and implement the ability to pause
00:03
and resume files which is very similar, okay so we'll go ahead and start with some buttons in here so I'm just going to pull these down, let's add these before the cancel just so we don't get confused and we're going to have the ability to pause this which we already kind of know we're going to emit an event out to pause this and then give the id and we're also going to have a resume
00:26
button in here which will of course swap over when this is paused so again we'll emit a resume event now we need a way to toggle between these two of course we need to know whether this is paused or not now there's a couple of ways that we could do this we could over on our dashboard when we initially create the file just inside of here have the status of whether this is paused but
00:52
within this file which is the upchunk instance this will tell us whether an upload is paused or not so we don't really need to continue to add more state onto each of these so we can just use what's already in there so let's go ahead and take a look at that now so if we just go here and we say well we want to show pause when it's not paused so we're going to say upload file
01:17
paused so that is the property from the upchunk instance which is within file which we can use and then we can do the same thing but just in reverse and when it's not paused we want to show resume oh no wait yeah we're in the wrong order when it is not paused we want to show pause when it is paused we want to show resume there we go okay so now when we come over and we trigger a
01:39
file upload here we should just see the pause button because it's not paused now when we click on this we want to pause the upload so how do we do this well once again if we come over to our dashboard and we come down to where we've got our component here we can just go ahead and say v on pause and we can say pause upload so we'll create another function out to do that and just while
02:01
we're there because this is so simple we'll also do the same thing for resume so let's say resume upload and you could even create one which toggles this it's entirely up to you but I prefer doing this it's a little bit more explicit so if we come up to the top let's go ahead and create our a pause upload function in here and of course that's going to take in the id so we know
02:22
which one we want to pause then we can just use our get upload by id and then we can access the file and you kind of guessed it we've already got that paused property but to actually pause a file within the upchunk instance we just invoke pause that's pretty much what we need to do so let's go ahead and create one for resuming this so resume upload and you guessed it it's
02:46
resume so just to quickly recap under here if the paused property within our upchunk instance is true we're going to show resume otherwise we're going to show pause and then we just invoke either of these through the events we're firing from that child component so let's go over and just try this out and see what happens I'm going to choose a slightly bigger file here I'm going to hit pause
03:08
and as you can see just as the last chunk is finished that pauses and it is paused that's it so I'm going to hit resume and again we resume and we can just keep doing this over and over again you kind of get the idea of pausing and resuming uploads so that is it that is how we very easily pause and resume uploads thanks to that functionality from that upchunk library

Episode summary

In this episode, we build on our file upload implementation by adding the ability to pause and resume uploads. If you've ever started a big upload and worried you'd need to stop halfway, these new features have got your back!

We start by updating our UI to add two buttons for each uploading file: one to pause and one to resume (these swap based on the file's current state). These buttons trigger events—when you click pause, we emit a pause event with the corresponding file's ID, and likewise for resume.

Instead of keeping extra state around to track which files are paused, we cleverly use the paused property built into our file upload (upchunk) instance. This keeps our code cleaner. Depending on that property, we show the right button at the right time.

Next up, we add some simple functions to our dashboard for actually pausing and resuming uploads. Each function looks up the correct file, and then calls either the pause or resume method from upchunk.

Finally, we test it out with a larger file. We can pause whenever we want, see that the upload really stops, then hit resume and watch it pick right back up. You can pause and resume as many times as you want, making for a really nice user experience!

So, with just a few tweaks, we now have full control over our file uploads—thanks to those handy upchunk methods.

Episode discussion

No comments, yet. Be the first!