vue file. This is the page that I want to interact with the app file upload component in throughout the rest of the course. Over in the browser, you can view this page by clicking the follow along link in the main navigation. Inside of the app file upload component, which exists inside of components, app file upload, we can start this whole journey with a humble HTML input.
It may not look like much, but the entire upload process starts here. Let's use the type attribute to make this a file type input. Now, when the user clicks on the input, a file dialog is displayed allowing them to select a file to upload. And out of the box, it doesn't look too bad.
We have a Choose File button and the name of the file printed out to the page. Tailwind has stripped a few styles from it, so it looks a little bit different than the browser default, but this is basically what you get with just the raw file input. We want to make a much more robust system than this. So in order to access the file or the files that the user selected, we can listen to the change event.
on the input. And on change, let's run a function called handle file select. Inside of script setup, we'll define this function, and then just console log the event. Over in the browser, let's see what things look like in the console.
Okay, here is the event object. And on the target, there is a property called files. This is a array like object called a file list. that contains the information for the different files we uploaded.
Since we only uploaded one, it is only one item long. But as you can see, this is a special file object with different file type data on it. Things like when the file was last modified, the name of the file, the size of the file, the type of the file, and so on. Right now, if I try to upload more than one file, By command clicking a second item, notice that it doesn't allow me to do so.
By default, the file input only accepts a single file upload. Let me cancel that then, and let's add the multiple attribute to the input. Now I'm able to select multiple items from the file picker. Finally, to get more control over how our file input looks, let's actually hide the input itself.
which has fairly large limitations on what all you can style, and let's connect it to a label that we can style in almost any way that we please. To relate a label to an input, you could use the FOR attribute in connection with an ID attribute on the input, or you could just wrap the input with the label. Either way you choose, the result is the same. A click on the label, does the exact same thing as clicking on the input.
Save things now, and notice that our input disappears from the page. But now I can style the label and add text to the label to make it look exactly like what I want. Let's just make it look like a button that says Upload, and I'll throw some Toan CSS classes on here for nice style. Perfect.
Over in the browser now, we have a nicely styled Upload button. And when I click on it, it opens the file browser just like before. I can select a file, but the file name is not printed to the page anywhere, so there's really no good feedback that things worked. We'll handle that in the next lesson.
vue file. This is the page that I want to interact with the app file upload component in throughout the rest of the course. Over in the browser, you can view this page by clicking the follow along link in the main navigation. Inside of the app file upload component, which exists inside of components, app file upload, we can start this whole journey with a humble HTML input.
It may not look like much, but the entire upload process starts here. Let's use the type attribute to make this a file type input. Now, when the user clicks on the input, a file dialog is displayed allowing them to select a file to upload. And out of the box, it doesn't look too bad.
We have a Choose File button and the name of the file printed out to the page. Tailwind has stripped a few styles from it, so it looks a little bit different than the browser default, but this is basically what you get with just the raw file input. We want to make a much more robust system than this. So in order to access the file or the files that the user selected, we can listen to the change event.
on the input. And on change, let's run a function called handle file select. Inside of script setup, we'll define this function, and then just console log the event. Over in the browser, let's see what things look like in the console.
Okay, here is the event object. And on the target, there is a property called files. This is a array like object called a file list. that contains the information for the different files we uploaded.
Since we only uploaded one, it is only one item long. But as you can see, this is a special file object with different file type data on it. Things like when the file was last modified, the name of the file, the size of the file, the type of the file, and so on. Right now, if I try to upload more than one file, By command clicking a second item, notice that it doesn't allow me to do so.
By default, the file input only accepts a single file upload. Let me cancel that then, and let's add the multiple attribute to the input. Now I'm able to select multiple items from the file picker. Finally, to get more control over how our file input looks, let's actually hide the input itself.
which has fairly large limitations on what all you can style, and let's connect it to a label that we can style in almost any way that we please. To relate a label to an input, you could use the FOR attribute in connection with an ID attribute on the input, or you could just wrap the input with the label. Either way you choose, the result is the same. A click on the label, does the exact same thing as clicking on the input.
Save things now, and notice that our input disappears from the page. But now I can style the label and add text to the label to make it look exactly like what I want. Let's just make it look like a button that says Upload, and I'll throw some Toan CSS classes on here for nice style. Perfect.
Over in the browser now, we have a nicely styled Upload button. And when I click on it, it opens the file browser just like before. I can select a file, but the file name is not printed to the page anywhere, so there's really no good feedback that things worked. We'll handle that in the next lesson.