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
17 episodes•1 hr 56 mins

Overview

Build a multiple file chunked uploader in Inertia with the ability to pause, resume and cancel uploads. We’ll also be able to edit metadata (like the title and description) for each upload — even while they’re uploading and processing.

In the second half of the course, we’ll learn how to queue and process uploaded files on the backend (like encoding videos), and in realtime, report back to the client with progress updates using WebSockets.

It’s everything you need to know to upload and process large files in Inertia.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

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