In this episode, we jump back into our uploader component and add the super useful ability to cancel an ongoing file upload. Thanks to the library we're using, this turns out to be really straightforward — we just need to add a cancel button under the progress bar and wire up a function to halt the upload.
You'll see how to tweak the uploader's UI to add a new button and ensure it doesn't accidentally submit the form. Then, we style the button to fit in with the rest of the uploader, and set up some spacing so everything looks good.
To properly test our cancel functionality, we throttle our network speed so uploads don't happen too fast, giving us time to hit that button. After wiring up the cancel action (which just calls abort
on the uploader), we see how the upload stops immediately — no record gets created, nothing gets uploaded anymore!
To wrap up, we do a little clean-up: resetting the uploader state and progress bar, and talk about creating a handy reset
function if you have more state that needs to be cleared. Finally, we demo the feature to confirm it's working—canceling restores the uploader to its original state. Simple and effective!