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.