Welcome back.
And I'm glad you wanted to do this lecture, even though there is a little tricky bits of JavaScript
involved.
But anyway, how can we make this better for a user?
How can we display the file name in that box?
And if the user chooses two files or three files, how can we display that number inside that label?
That's a good question.
Let's do it together.
As I mentioned, we're going to need JavaScript, and JavaScript has to be wrapped within script tags.
So how are we going to do this?
Well, luckily for us, JavaScript gives us access to, or the browser gives us access to, the File API.
So whenever you have an input of type file, there's a property on that called files, and that is almost
like a big object with a lot of properties and methods on it, like the length property to tell us how
many files have been uploaded, the names of the files, etc etc.
So we're going to use this File API, we're going to grab the information and then we're going to put
that information in the value attribute of that label ... or not the value attribute,
I'd say, the innerHTML.
We're going to change the wording of the label from "Choose a file" to whatever we want.
So it's going to be really cool.
So the first step is, is let's grab all our main elements, grab our main elements.
Firstly, I want to grab the input, right?
So the input with type file and I'm going to access our document [object]. On there,
I want to use the ... what should we use ... the querySelector maybe?
Yeah, let's use the querySelector.
There's many ways to do things and I want to grab all our elements with a class of uploadFile.
That's what we called it, right?
And we've only got one input with this class on and this querySelectorAll()
method, by the way, returns a collection.
So we want the first item in the collection.
If you're a bit confused, please check out my DOM course.
But if you're following along, great.
So there we go.
We've got our input file.
The next thing I want to grab is our label, and we can do this in many different ways.
I just want to show you different ways to do it.
So let's define a variable called label.
And here we can use our input file, and we can ask for the nextEelementSibling, because we know straight
after that input, is the label.
So there we go.
We've got our input, we've got our label, we need the label because we're going to be changing its
text, right. Actually, which means we should probably set up a variable, let's call it labelText,
and that's going to be our label and it's going to be what is the text inside it,
the innerHTML property.
Right now it is "Choose a file", but we're going to change it.
Let's just make this bigger.
How's this?
It's looking good right. Now,
the next thing I want to do, is I want to add an event listener on the input file.
So, if we look at the browser, okay, every time a user uploads a file, for example, let's just go
to file1.txt.
If the user clicks open, a "change" event is fired.
This automatically happens in the browser.
We don't have to code this up.
These events are automatically linked to the input of type file.
So whenever a file is submitted, just remember the change event has been fired.
So I want to listen for that change event.
And when that change event happens, I want to grab information from the file, and put it inside the text
of that label.
That's what I want to happen.
So let's do that.
Let's grab our input file. On here,
I want to add an event listener, and we are listening for the change event.
And again, I talk about this in my other courses, but what happens with the event listener is that
what's returned to us is an object.
It's almost like the event object itself.
So let's grab that event object, and put it in a variable called "e".
This is just kind of call it standard practice in the development industry.
Okay, so what do we want to happen when that change event is submitted?
Well, firstly, I want to eventually get the file name.
So let's define a fileName variable.
And right now it's empty.
Let's just set it as an empty variable.
Later on, we're going to get it, and you'll see how we do it.
The next thing I want to do is I want to use the File API.
So let's use the File API to get the file name and number of files.
And remember I said that, you know, with an input of type file, there's an automatic property, which
is actually a big object called files.
This is [from] the File API.
So all I need to do, is I want to grab that file
input.
I'm just going to call it file.
I want to grab that input,
getElementById() ...
we've called it file.
And on here there's a property called files.
So now we've got call it the File API.
I've just put it in a variable called file.
Now what do I want to do?
Well, my dear students, I'm almost thinking the best approach, right, is if there's more than one
file selected, I just want to display on that label the amount of files, like 2 files have been selected,
or 3.
I don't want all the file names to be in that label because that label could eventually get really big.
It just won't look visually appealing.
But if there's only one file, I wouldn't mind just putting that file name in that label.
So why don't we do that?
So let's just set up an IF statement and we can say If the length of the file.
Right.
And this is where I said that File API has a lot of properties and methods.
One is called length, and it just defines the amount of files that have been uploaded on that button.
If that is greater than 1, then what do we want to happen?
Well, firstly I want to figure out how many have been uploaded, so let's just call that fileNumber
for lack of a better word.
And that's going to be that File API variable we got,
and it's got a property called length.
Length.
And then remember how we got that label element?
Well, I want to grab that label element.
I want to change its innerHTML and I want to assign it to a value.
I'm going to use Template Literals here because it's so much easier.
And let's just say uploaded,
fileNumber files.
And if you're not sure what Template Literals are, it's actually just an easier way for us to include
JavaScript variables inside text.
You know, here we've got the text uploaded and files and we're putting that variable fileNumber within
it.
And in order to put a variable inside Template Literals, you just have to use the dollar sign and curly
brackets.
That is all what that is. Then we've got ELSE, right?
So now we know the file length is equal to one.
It's not greater than one.
In that case, I just want to grab the file name.
So let fileName equals our file variable.
And we know there's only one item within here, and we want to get its name value.
That's all we want to do. And then we want to access our label again.
We want to change its innerHTML this time to the fileName.
Bob's your uncle. (music starts)
I just hope it works now.
So let's go to the browser.
Let's choose a file.
Let's go one file,
file1.txt.
Come on.
How cool is that?
Woohoo!
How awesome is that?
But now let's choose two files and see if that works.
So we click on here.
Let's go file1.txt and debug.log.
Upload it to files.
No way my dear students, isn't this awesome?
Hope you're having as much fun as I am.
I know this is quite in depth.
We used the File API, we used some JavaScript, but you can see that although the input of type file
is a difficult widget to work with, you can indeed work with it, and we should.
You know, when you're asking, you know, building forms and asking users to upload files,
we should make it as intuitive as possible and as easy as possible for the user to know what's going
on.
Anyway, I know we've covered a lot and we've still got a long way to go.
See you in the next lecture.