Now that we have access to the selected files through the inputs change event, let's store those selected files in a reactive array so that we can display their file names to the page. First, I'll create a ref called files, initialize it to an empty array, and so that we can make things type safe, I'll say that this is an array of file objects. It looks like I did forget to add lang equals ts to the script setup tag. So let's go ahead and do that now.
Now in handle file select, remember in the last lesson in the console log, all the files existed in a file list under E dot target dot files. A file list is not the exact same thing as an array, but we can turn it into an array with the array from method. And I'll just save this in a variable called files as array next. let's concatenate all of these new files to the existing files in the reactive ref.
This will ensure that the selection works the first time around, but then the user can also continually add more files on subsequent clicks. We'll remove the console log, since we don't really need it anymore. And then just underneath the label, let's use a V4 to loop over the files and print their name to the page. Over in the browser, let's try things out.
I'll select three files and there you have it. One thing I noticed as I was developing the last bit of this, I did have to go back and restart my IDE because apparently the TypeScript server wasn't running properly and that revealed a couple of other TypeScript errors that we need to take care of in the handle file select function. So let's type the event. As such, use type assertion to type the event target as an HTML input element, access the files on that if it exists, otherwise fall back to an empty array.
Perfect. Type script errors are gone and everything still works. Now that we have access to the selected files through the inputs change event, let's store those selected files in a reactive array so that we can display their file names to the page. First, I'll create a ref called files, initialize it to an empty array, and so that we can make things type safe, I'll say that this is an array of file objects.
It looks like I did forget to add lang equals ts to the script setup tag. So let's go ahead and do that now. Now in handle file select, remember in the last lesson in the console log, all the files existed in a file list under E dot target dot files. A file list is not the exact same thing as an array, but we can turn it into an array with the array from method.
And I'll just save this in a variable called files as array next. let's concatenate all of these new files to the existing files in the reactive ref. This will ensure that the selection works the first time around, but then the user can also continually add more files on subsequent clicks. We'll remove the console log, since we don't really need it anymore.
And then just underneath the label, let's use a V4 to loop over the files and print their name to the page. Over in the browser, let's try things out. I'll select three files and there you have it. One thing I noticed as I was developing the last bit of this, I did have to go back and restart my IDE because apparently the TypeScript server wasn't running properly and that revealed a couple of other TypeScript errors that we need to take care of in the handle file select function.
So let's type the event. As such, use type assertion to type the event target as an HTML input element, access the files on that if it exists, otherwise fall back to an empty array. Perfect. Type script errors are gone and everything still works.