In this episode, we dive into the process of canceling uploads — not just stopping the upload itself, but also making sure everything behind the scenes is properly cleaned up.
First up, we set up a Cancel Upload button in our upload item component. We make it so this button only shows when a file is currently uploading. When clicked, it emits an event up to the parent component, signaling which upload by its ID should be canceled.
Back in the main upload management area (like a dashboard), we listen for this cancel event and handle it: first, we use UpChunk's super convenient abort
method to actually stop the upload in progress.
But that's not all — since we already created a record for the file in our database as soon as the upload started, we need to clear that out too. So, we add a new controller and a DELETE route that will let us destroy the database record for the video. This cleanup is triggered right after aborting the upload.
As a final touch, once the server confirms the deletion, we also remove the canceled upload from the list on the frontend so the UI stays in sync.
If you're following along, by the end of this video you'll see how easy it is to abort an upload both on the client side and in your backend, and how to keep your interface nice and neat without hanging onto unfinished uploads. One important note: we mention that you should add authorization to your destructive routes in the future to keep things secure.