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
17 episodes•1 hr 56 mins

Overview

Build a multiple file chunked uploader in Inertia with the ability to pause, resume and cancel uploads. We’ll also be able to edit metadata (like the title and description) for each upload — even while they’re uploading and processing.

In the second half of the course, we’ll learn how to queue and process uploaded files on the backend (like encoding videos), and in realtime, report back to the client with progress updates using WebSockets.

It’s everything you need to know to upload and process large files in Inertia.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!