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

Episodes

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

Transcript

00:00
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
00:21
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
00:41
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
01:04
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
01:25
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
01:42
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

Episode summary

In this episode, we dive into how to let users cancel an ongoing upload using the upchunk package. We'll start by adding a simple "Cancel" button to our interface. You'll see how to wire up this button so that when clicked, it triggers a function to abort the actual upload request. This involves interacting directly with the upload state and calling the abort method, effectively killing the XHR request that's sending the file.

We also discuss why it's useful to bring back throttling here—so you can react in time when you hit the cancel button and see the effect in your UI and network tab. Once cancelled, it's important to reset your application's state: clear the uploader, set progress back to zero, and make sure the user can start a new upload if they want to.

By the end, you'll see the entire process, from clicking "cancel" to the network request being stopped, the UI clearing out, and getting everything ready for the next upload. Next up: we'll tackle pausing uploads, which works a lot like what we just built here.

Episode discussion

No comments, yet. Be the first!