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

Episodes

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

Transcript

00:00
So up chunk gives us a really convenient way
00:02
to abort a complete upload. So that would just stop the chunks uploading and cancel off any further requests to the file. But because we are also creating the file in the database
00:14
while the upload is happening, we also need to look at deleting the file from the database as well, which is pretty straightforward if you've worked with Inertia before.
00:23
But let's work through both these things that we need to do. Now, the first thing that we're going to do is create an upload item component.
00:30
And we're just going to create out a bunch of buttons under here, which we'll use to control our upload. That'll include pausing and resuming later. OK, so we'll go ahead and say flex item center
00:41
and set a space on the x-axis of 3. And we only want to show these buttons when this upload is actually uploading. So let's go ahead and do a VIF in there.
00:51
And in here, we can just create out a bunch of buttons. So this is going to be the Cancel Upload button. Let's go ahead and start this up really quickly. So we'll set a text of blue 500 here.
01:02
And we'll set the text to small. And we'll set a font of medium. OK, let's just check that that looks OK. And then we'll fill in the functionality.
01:10
There we go. So when we click that, we want to cancel the upload. OK, so in here, we're going to emit an event from this. Because we don't really want to do this
01:20
at the individual component level, because we've got a higher up list of uploads. We want to remove the upload from that list. So we want to emit an event from this component to say,
01:30
please cancel this specific upload by its ID. To do that, we're going to head up to the top of the file here. And we're going to say Emit and Define Emits. That is a view-specific functionality.
01:44
And it just means that we've got an Emit function now that we can trigger to emit something from this component. So down here under Cancel Upload, we can just say V on Click.
01:53
And we can Emit, Cancel from here. And we need to know which one we're canceling. So we can just pass in the upload ID. So let's handle this cancel event
02:03
that we are emitting now. And we'll do that over in our dashboard where we have all of our upload stuff. So inside of here, we want to come down
02:12
to our actual component that we're iterating through. Let's pull these down line by line just so things are a little bit tidier. And then in here, we're going to say V on Cancel.
02:23
And we're going to call a function here called Cancel Upload. So we can go right to the top now. And let's just do this directly under here, Cancel Upload.
02:32
And we know that because we're passing that ID here, we can receive that ID into there. So let's just console log on that ID, make sure we've got everything hooked up properly.
02:42
And then we can actually cancel this off. So let's go ahead and upload a file, head over to our console, hit Cancel, and there we go. Sure enough, that's the upload that we want to cancel.
02:54
So the first thing that we can do, and the easiest thing to do, is get an upload by its ID, which we know we can now use ID for. Then go into the file, which is the UpChunk uploader,
03:04
and we can just call the abort method. So that will abort the file actually uploading. So very, very simple to do that with UpChunk, which is now within this file.
03:13
Hit Abort, and that will stop the upload. So let's go over and try this out. We'll head over to our Network tab, and let's just choose any of these files,
03:22
hit Cancel Upload, and there we go. That is completely aborted. No more requests are being sent down, and no more chunks are being sent down.
03:30
Okay, now we want to delete the file from the database, because we really don't need this hanging around in the database. If it's been canceled, there's no point,
03:38
because there's not going to be a file attached to this. So down here, we're going to remove this from our backend. So let's go and create out a controller to handle this, and we'll call this Video Destroy Controller.
03:52
And let's head over to our Roots here, create out a route for this. So that's going to be a Delete Request to Videos Video, Video Destroy Controller,
04:03
and we'll call this Videos and Destroy. Now, really importantly at the moment, we are not authorizing any of these requests. We'll come back to that a little bit later,
04:12
but it's super important that we do eventually authorize these, otherwise anyone can just hit these routes and delete any of our videos.
04:20
So let's go ahead and say Invoke, and this is where we want to delete that video. So we can pretty much fill this in, because it's pretty straightforward.
04:27
We're just going to say Video Delete, and then we're going to return back. We can use an inertia request for this as well. So let's go ahead and pull that video in.
04:35
Remember, really crucially, we need to authorize this later. Okay, so now that we've got that Videos Destroy in there, we can just send a request using Inertia's router. So let's just make sure we've got this pulled in
04:47
at the top, and we do, and let's go ahead and send a Delete Request down to Route, Videos Destroy, and of course, as part of this route buildup,
04:57
we need to pass the ID into there. Now already, we need to make sure that we are passing down Preserve Scroll, and really importantly, Preserve State,
05:07
so all of the state is preserved on our page once we come back from inertia. So let's try this out. I'm going to go over to the database,
05:15
clear everything out of here. We'll go over to here. We'll start an upload. We'll delete it.
05:20
So let's go and cancel the upload, and there we go. So we've got a request sent down there. We shouldn't have anything in our database now. That has been completely deleted,
05:30
but of course, this is still hanging around on the client side, so we need to remove this from the list. So if we head back over here on the success of this being deleted,
05:40
so we can hook into inertia's events here when we send a request down, we just want to go ahead and set the uploads value to a filtered version, not including that.
05:49
We could extract this out to another function, but we're not going to be using this anywhere else, so we might as well just do it directly in here. So we're going to go ahead and say uploads value.
05:57
We're going to reassign that to a filtered version of that. Now to filter this, we'll get the upload through, and we just want to say we'll return all uploads where the upload ID doesn't equal the ID
06:10
that we've passed into here. So we'll just return all of the others except the one that we're deleting. Okay, let's try this out.
06:16
So let's go over to the database, make sure that's clear, and we'll go ahead and upload a file. We'll hit cancel. That's been canceled off in terms of the request,
06:25
deleted from the database, and of course, removed from the list on the client side as well. So there we go. That is deleting our files.

Episode summary

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.

Episode discussion

No comments, yet. Be the first!