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
08. Cancelling uploads


so cancelling an upload is incredibly straightforward with the upchunk package we are using let's go ahead and add a button to cancel the upload, so in our button section just down here let's go ahead and create out of course a button here and this is going to say cancel let's go ahead and add a class onto this quick with text small and text indigo 500
and that looks something like this when we are in the upload state and this is at the point where we probably want to bring back our throttling just so we can catch this in time, so with our button when we go ahead and click on this we just want to invoke a cancel function we could add that as part of our state
but let's just create out a function up here above submit called cancel and what we can do with this is directly access our state, access our uploader and we can either cancel this or we can abort this, so we are going to choose abort because that's going to cancel off the xhr request that we are sending down
now let's just see what happens when we do this and when we trigger this function on here so I'm going to go ahead and choose one of these files, hit upload and let's press cancel and you can see it kind of starts again and everything just starts uploading again so it's really at this point we want to get rid of our entire state, so we want to abort this
but then we want to go ahead and reset our state so the uploader goes the progress by goes and everything just stops so we're going to keep an eye on our network tab that's really really important so let's go ahead and choose another file choose this, hit upload and I'm going to hit cancel and there we go
we have this xhr request cancelled, our state is completely wiped out the progress is set back to zero and of course we're back at the point where we could just hit upload again if we wanted to and that file would be uploaded that's how easy it is to cancel a file upload, let's move on to pause which is very similar
10 episodes 46 mins


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!


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