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
03. Handling dropped files

Episodes

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

Transcript

00:00
So straight on to the fun part, which
00:02
is handling the dropped files. And by the end of this episode, we will be able to choose some files, not drag and drop them just yet.
00:10
And we'll be able to iterate through them on the page, which is great, because then we can later create our component to show the progress, update that information, et cetera.
00:18
But this is going to be what we're doing first. So how do we handle dropped files inside of this input within Vue? There are a couple of different ways to do this.
00:28
The first way is to create a ref, which is a reference to this particular input. We can watch for changes. We can trigger a method to then extract the files from that.
00:39
So that would be something like doing ref and files. Or what we can do, and what's more appropriate in this situation, because we're later going to add drag and drop uploading,
00:49
is to have a V on change event. So this will be triggered when this changes. Now, what we can't actually do with this is we can't set up a V model on this
00:59
like we normally would with an input, because files are read only. We can't update them directly in this input. So we can't use a V model.
01:07
That would probably be the most convenient. So let's go ahead and implement this on change handler. So we're going to say handleDroppedFiles, and we'll create a function out to handle that.
01:17
Now, for now, we're not really sure where these files are coming from. And they're going to be different when we drop the files to when we select them.
01:23
So I'm just going to pass through the event through here for any of the events that we have in JavaScript. And let's just see what this contains,
01:31
and then we can take it from there. So we're going to go ahead and say handleDroppedFiles, create out that function at the top here. And of course, we're getting that event into here,
01:39
which we're going to change over, but let's just console log that and just see what we get. Okay, great. So that's pretty much it.
01:45
If we open up our console now, we should be able to see this logged out. So let's go over to our console. I'm going to choose a bunch of files here,
01:53
and there we go. So we've got this event. Now let's go down here. We've got our target.
01:58
That's our input itself. And then if we come down here, it's somewhere within here, we should have a list of files, and there it is.
02:05
This is a file list. So we're going to need to bear that in mind when we're iterating over this or processing each of these files,
02:12
because by default, a file list is not iterable. It's not like an array. We can't just iterate over it. But all of our files are in there, which is great.
02:20
Now, rather than pass the entire event down, this doesn't really make sense because we can do that directly within the template and then just receive in a list of files in here.
02:28
So let's go ahead and log them files out. We're going to come down here. Now we know where that is under target and files. We can just pass them directly in,
02:37
and we should get exactly the same thing. So let's go ahead and click on here, and let's select a bunch of these, and there we go. We get our file list, great.
02:45
Okay, so inside of our handleDroppedFiles, now we want to iterate over each of our files. Now, we can't just do something like file for each, because that is not an iterable thing.
02:57
If we did run this, it just wouldn't work. So what we need to do is use array from on our files, and then we can go ahead and do a for each on this within JavaScript.
03:08
And the closure in here is, of course, just going to contain each of the individual files. And then here, we can push them to the stack of files that we're uploading.
03:17
Again, for now, let's just console.log out on our file and just see what we get. And now we should get a list of individual files for each of these that we drop in, and there they are.
03:26
So these files are, of course, the actual files that we want to upload, and that is where we can start chunking these, sending them down to the server. But we need somewhere to store these
03:36
so we can delete them if we need to. We don't just want to start the upload inside of this, because then we'll have no control over modifying, canceling, pausing, or doing anything else
03:46
with each of these files. So that is where we need some sort of state in our application where we can hold the files that we're uploading.
03:54
So from this, we can pretty much just use a standard ref. Let's go ahead and import ref from view. And then here, we're going to create out a files constant. That's going to be a ref with, by default, an empty array.
04:07
Now, what we're going to do with each of these files is not just push in the file itself, because we want to attach a bunch of data alongside of these, as well as the actual uploader
04:17
when we get to processing these in chunks and sending them down. So what we want to do instead is access the files value, the ref we need to access the value
04:26
when we're not working within a template. And then we're going to go ahead and either push or unshift this. Now, we're going to choose unshift.
04:32
This is just pushing this to the top of a stack. Push will push this to the bottom, and we kind of want the latest upload to be at the top of this array.
04:40
So we're going to use unshift. And then in here, we're just going to push an object for each of these files that we have. So eventually, we're going to have an ID in here,
04:48
which is really important. We're going to do this only when we have stored this in the backend, which we're going to do next.
04:54
So we'll get an ID back so we know how to reference this particular file. We're going to have a title, which by default, we're going to set to the file name.
05:03
And then we're going to have a bunch of other data in here as well, like storing the file, the upload progress, all that kind of stuff.
05:09
Then when we iterate through our files and pass each of the files down to its own component, we can read that progress in. Let's keep this like it is for now.
05:17
We have got an ID set hard-coded in here, so it's not quite going to look great. But let's go ahead and just iterate through this and try this out.
05:25
Okay, so we're going to come down to our template and let's just dump our files out first of all. So I'm going to do this within a separate container. So I'm going to grab this container here,
05:35
pull this down, and then I'm going to get rid of this form in here, swap that back to a div. And then this is going to be each of our files.
05:43
So in here, we could probably set a space on the y-axis of six just to separate that out. And then each of these inside of this container will be each of them files that we iterate through.
05:55
Okay, let's just take a look and let's just get rid of our console a little bit. There we go. So this is going to be each of our files.
06:01
So the goal here is just to output this for each of the files that we have. That's pretty straightforward. With a ref that's an array, we can just iterate over it.
06:09
So let's go ahead and say v4 file in files. We are going to need to key this by the file ID just so we have a unique list so you can re-render this properly.
06:20
Of course, this is hard-coded at the moment. It's just set to one. So there's not really much point doing this at the moment, but let's go ahead and take a look anyway.
06:27
So I'm going to go ahead and click on this just to upload some files, choose five of these, and yeah, sure enough, we've got an error.
06:34
Let's just check out what's going on here. Okay, cannot read unshift. So let's go up to what we're doing here. Files, value, unshift,
06:43
and yeah, because we've called this files, that's not going to work because it's trying to read this value. So let's say uploaded files,
06:51
and let's go and iterate through them, and then files won't work. In fact, let's call this uploads because it sort of makes a little bit more sense.
06:59
So let's say files, and we'll say uploads.value.unshift because they are technically uploads with all of the other data that we've assigned.
07:08
Okay, let's try this again. Let's go down here and make sure that we are iterating over the right thing now.
07:14
So uploads in here, and upload ID. Okay, great, that should work now. So let's go ahead and choose all of these files,
07:23
and there we go. We have got a list of our files in here, and of course, we can do better to separate these out within the UI,
07:29
but we can do that. Now, of course, with these, we're going to want these to live in their own component because they're going to have their own functionality.
07:35
Each of these individual files are going to be able to be updated, canceled, all that kind of stuff. So we're going to go ahead
07:41
and create out a component for this. So let's put this in a files directory, or let's call this uploads. We'll keep the naming similar,
07:49
and let's call this upload item like this. And then, of course, we're going to create out a template inside of this component.
07:58
This will have its own script section, of course, and we can just start to move this over. So with this, that's going to be what we see. So let's put that inside of this upload item
08:10
within the template, pull this in. Of course, the for each now, the V4 is going to come outside of this, and we're going to iterate over that component.
08:19
So let's bring in this upload item component, and we're going to add the V4 directly onto that. And then we're going to pass down each of the upload objects
08:30
so we can read that data in there. Okay, let's go ahead and pull in this component. So let's import upload item from, and that's in our component section,
08:42
uploads and upload item dot view. Let's just double check that, and yeah, we should be good. Okay, so now we've got that in its own component,
08:51
and we're passing down this upload. Let's go over to our upload item and define our props in here. So that upload is going to come through as an object.
09:00
And then in here, I'm just going to dump out the upload itself just so we can see what we've got. Okay, let's go ahead and try this out. So I'm going to select all of these files,
09:09
and there we go. They are now in their own component, and of course, each of them uploads have their own data attached.
09:15
So let's go ahead and just split these out a little bit with a little bit of CSS. So we'll do a space Y of three, and we should be good.
09:23
So there we go. We now can select files, store them in some sort of state, attach some unique information to each of these,
09:31
and we can see them in our list. So what we now need to focus on is as soon as this thing gets uploaded, so as soon as the user chooses a file,
09:41
the first thing that we want to do is create a record in the database. So we can get back stuff like the ID, the title, the description,
09:48
and then we can build that form up to modify this. So let's go over to the next episode and look at initially creating a record as soon as that file gets uploaded.

Episode summary

In this episode, we're starting to handle files selected by the user in our Vue app. We aren't tackling drag-and-drop just yet—right now, you can pick files through a standard file input. The goal is to select a bunch of files and then process them in our app, getting ready to display things like upload progress later.

You'll see how to tap into the file input using Vue's event handling. We talk about why you can't use v-model with file inputs (since they're read-only), and instead use a @change event to grab the list of files. We also explore the fact that the FileList you get from the input isn’t a real array, so you need to convert it with Array.from to iterate over it easily.

Next, we set up some state to keep track of the files the user selected. But instead of just saving the file objects directly, we're going to attach extra info to each—you'll see where the upload progress and other metadata will live later on. We organize these files into a reactive array using a ref and make sure to put the newly-added files at the top of the list.

Once we've got our uploads array, we render the list onto the page. Then, to make things a bit more maintainable and modular, we refactor this out into its own child component called UploadItem, which will eventually handle all the controls (like cancel or edit) for each file. Props are set up, the child component wired in, and we test everything still works.

By the end, we've got a basic file picker that lists files and their details in the app—ready for when we start sending data to the server and managing uploads for real. In the next episode, we’ll hook things up so the backend creates a record for each file as soon as it’s added.

Episode discussion

No comments, yet. Be the first!