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
12. Dragging and dropping files

Episodes

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

Transcript

00:00
Okay so to finish off this section we'll go ahead and implement the ability to drag and drop files onto this area and then have them upload like normal, now obviously at the moment when I drag something onto it it's just not going to work, if we let go of this it's just going to open up a video talking over me inside the browser so that's not great, so the first thing that we're going to
00:19
do is focus on the events that we have here, so if we come up to our dashboard and go down to our input here we have a bunch of things that we can add onto here, now we don't want to add that to the actual input we want to add this to the label because remember the input's hidden, so inside of here we're going to go ahead and add on a v on drag over and then we're going to do
00:42
something, we're going to have another event called drag leave like so, that's when we leave a file so we take a file away and then we're going to have a v on drop which you guessed is when we actually drop the file into here, so let's focus on drag over and drag leave because that's going to toggle a boolean which will allow us to change the styles around for this so we can visually see
01:08
that something is being dragged over, so at the top here let's go ahead and create out another ref and we'll call this files being dragged and that's just going to be a standard ref in here and what have I done here dragged and that's just going to be false by default of course because by default they're not going to be dragged, so now around our input we can go ahead and set
01:33
files being dragged to true and files being dragged back to false, now what we can do is bind in some classes when that happens, so for example we could go ahead and set the background to grey 200 and the border to grey 300 which is just a bump up from what it currently is when files are being dragged, that is all we need to do to get the visual functionality working,
01:59
so when we drag over set this to true, when we leave set this to false and then change the class when that is true, so now if we just open up our finder you can see sure enough that is now looking more like a drag and drop, great, so now we just need to implement the v on drop, so let's add this in here v on drop, what do we need to do, well we need to handle our drop files but remember when
02:24
we set this up earlier if we just take a look at this function we allowed a list of files to be passed through not the event, now the reason that is really crucial is if we just head back down to our input here when we do drop these files in they come from a different place, so for example if i were to say let's just check what we have here event target files
02:52
and we pass that in that would kind of make sense but within a drop event target and files is completely different, instead what we have is data transfer so that's why we only accepted the files in rather than the event because otherwise then we're going to have to choose between these two, so on drop handle these drop files let's also make sure we add a prevent
03:16
in here so we don't open this up in the browser and we should be good, let's try this out so i'm going to go ahead and drag a file in drop it and yeah sure enough that's not working so let's just have a look at what we might need to do, we might also need a prevent on each of these as well i think we probably do, so let's go ahead and try that and let's open up our file browser drop it in
03:39
there we go very very simple to implement our drag and drop uploading, now of course we're kind of stuck in the ui state where this looks like it's being dropped in so what we can do is we can handle our drop files and then immediately after this we can set file being dragged back to false so let's go over and just try that one more time and we should see that drag in the state changes
04:03
the ui changes and then of course our file gets uploaded as well and of course this is going to work for multiple files so if i just go and paste all of these in there we go we're uploading all of our files by either clicking on this now or dragging and dropping and releasing them into this area

Episode summary

In this episode, we're wrapping up our upload section by adding drag-and-drop support for files! Right now, if you try to drag a file onto our upload area, it just opens the file in the browser, which obviously isn't what we want. So, we'll fix that and make the experience much smoother.

First, we dive into handling the important drag and drop events: dragover, dragleave, and drop. We set up booleans that let us change the look of the upload area when a file is hovering over it, so users get some nice visual feedback. You'll see how to toggle a different background or border color just when you're dragging files onto it!

Then, we wire up the actual logic for dropping files in. There’s a little quirk here: files from a drop event are accessed differently compared to the usual file input, so we tweak our code to handle that using dataTransfer.files. We also make sure the default browser behavior doesn't sneak in and ruin the party by using preventDefault() in the right places.

After testing a few times—dragging single and multiple files to make sure everything works—we clean up any last UI quirks so dropping files feels super smooth. Now users can either click the upload area or drag files onto it, making your file uploading experience a lot more flexible and user-friendly.

Episode discussion

No comments, yet. Be the first!