Okay.
Welcome back.
Hope you are amped. I hope you're having a lot of fun.
And it's quite difficult for me sometimes because later on I've dedicated an entire section to talking
about CSS and styling of forms and widgets.
And as you'll notice, you know, it's difficult because some widgets are very, very easy to style,
like the input of type text, very, very easy to customize.
Other form widgets are quite difficult to style.
And one of these widgets is, you guessed it, the input of type file.
It's not easy to style this widget. And I could have done this example in the styling section and I decided
to put it here because we are talking about the file type.
And I just thought, you know, let's rather have all the file type lectures kind of in one place.
So later on I am going to be talking about CSS, at a high level anyway.
This is not a course on CSS, but this input of type file is a tricky one to style.
And for that reason I just thought, let me show you kind of a pro-tip if you will, or a nice workaround.
So let me first show you that it is difficult to style.
As always, let's start with an HTML file.
The head.
We are going to apply some CSS.
Not now though.
Body.
Let's have a form. Action,
we don't need an action.
You know, typically with with files, we're going to be using a POST request.
Remember I said you must set its encoding type to multipart/form-data.
Don't forget to do that when dealing with files.
And let's just have a div with a class of container.
We don't actually need it, sorry, it's just habit.
It's always good to wrap things in containers when it comes to styling things later, but I'm not too
concerned about styling in this course.
Um, then we want input of type file.
We can give it a name of "file". Arg, a name of "file".
Sorry, not name. The ID we can give as "file".
Let's give it a class of "uploadFile".
And remember I said if you want the users to be able to select multiple files, you can use the multiple
attribute. And it's a boolean attribute,
meaning it's either there or it's not.
So we don't have to assign it a value.
It just needs to be present. And let's open this up in Live Server.
There we go.
Right. So it's just a file picker widget and this is displayed by the browser.
But what's difficult, right,
if we try and target this input, for example, and we try and change its background, its background
colour to red, can you see that we actually can't style that actual "Choose Files" box.
And this is such an annoying thing and it just becomes very difficult to style this widget.
And I've seen quite a few different techniques on how people try and solve this problem.
I mean, one technique is trying to wrap the input element into a container that mimics a button, and
then the input had to kind of follow the cursor.
And then when the cursor clicks on the button, it's actually clicking on the input of type file.
It gets really messy.
One quick, quick way though, that you can get around all of this is why don't we style a label and
just hide the actual input itself.
Remember,
because remember, if we include a label and we attach it to an input, a user can click the label and
it automatically toggles that input that we assign it to.
And then we can easily, easily apply styling to a label.
It's kind of a pro tip.
It's kind of a cool workaround.
Let me show you.
Let me show you exactly what I mean.
What can we do first?
So let me include a label.
So here we go.
Label "for" ... we've got to match the ID that we gave to the input, which is file.
And here we can ask the user to choose their file.
Choose a file/files.
Okay.
We save this.
Let's just get rid of the "s".
There - choose a file.
Okay, so we've got that.
And we know as a label, if I click on "Choose a file" with my mouse, okay, that's what I'm going to
click on now.
I'm not clicking on the actual input.
I'm clicking on the label.
It's going to open up that input of type file.
This is exactly what we wanted. And if we look on documents, I can attach ... let's attach a text file.
How's that?
There we go.
So I've just attached a text file called File1.txt by the way. But it looks a mess, and we can't style
it nicely when we're working with the default form widget provided by the browser.
So what do we do?
Let's keep the label and let's hide everything else.
Okay.
It's going to be super, super easy.
Let's get rid of this input for now.
Uh, we gave the input a class of uploadFile
right.
So upload,
uploadFile.
And why don't we just hide it?
display:none.
There we go.
We've literally hidden it.
But again, if I click on the label, it works exactly the same because we've associated it with that
input of type file.
Very, very cool.
Right.
And there's a lot we can do here.
Firstly, let's style that label.
So let's grab the actual main element, uploadFile and we want to style its label.
I don't know what you want to do.
Maybe we want to font ... font-weight,
let's make it a bit more bold.
And here of course we can have a cool background color like a red but I don't like red.
I want it to be a bit more
a bit darker.
Let's try that.
Oof!
It's a bit too dark.
That's okay.
Cool.
We can make it white color.
How's that?
We can add some padding.
10 pixels.
Another thing is, if I hover my mouse over this "Choose a file", nothing happens.
So I mean, let's set the cursor property to pointer.
So at least it's a hand symbol when you hover over it.
And display ...
we don't really need to do this, I guess.
Inline block.
There we go.
Just adds a bit of margin to the top.
And there's our cool file picker. So you can already see how intuitive it is and what a cool little
trick we've done.
Right?
How cool.
So there we go.
Another thing, though, you'll notice, though, if I do select the file and I can hold the control
key and select a few,
right.
There's no visual cue.
There's no visual cue of what's happening.
And in order to do that ... whew ... maybe I should include it.
Yeah, we're going to need to use JavaScript. And this lecture is getting a bit long, so let me stop
it here. If you are interested,
right,
it's going to be a bit advanced because we're going to be using JavaScript, but we can make it more
visually appealing or it can just improve the user experience if we have the file name or if we even
include how many files have been uploaded so the user knows.
So if you are interested, check out the next lecture.
If you're not, skip the next lecture and I'll see you in two lectures on. Bye.