WEBVTT

0
00:00.260 --> 00:01.220
Welcome back.

1
00:01.220 --> 00:08.600
And I'm glad you wanted to do this lecture, even though there is a little tricky bits of JavaScript

2
00:08.600 --> 00:09.190
involved.

3
00:09.200 --> 00:12.410
But anyway, how can we make this better for a user?

4
00:12.410 --> 00:14.690
How can we display the file name in that box?

5
00:14.690 --> 00:21.980
And if the user chooses two files or three files, how can we display that number inside that label?

6
00:22.730 --> 00:23.810
That's a good question.

7
00:23.810 --> 00:24.770
Let's do it together.

8
00:24.800 --> 00:30.530
As I mentioned, we're going to need JavaScript, and JavaScript has to be wrapped within script tags.

9
00:31.130 --> 00:32.230
So how are we going to do this?

10
00:32.240 --> 00:39.170
Well, luckily for us, JavaScript gives us access to, or the browser gives us access to, the File API.

11
00:39.200 --> 00:45.080
So whenever you have an input of type file, there's a property on that called files, and that is almost

12
00:45.080 --> 00:51.050
like a big object with a lot of properties and methods on it, like the length property to tell us how

13
00:51.050 --> 00:55.010
many files have been uploaded, the names of the files, etc etc.

14
00:55.010 --> 01:00.440
So we're going to use this File API, we're going to grab the information and then we're going to put

15
01:00.440 --> 01:05.030
that information in the value attribute of that label ... or not the value attribute,

16
01:05.030 --> 01:06.170
I'd say, the innerHTML.

17
01:06.200 --> 01:10.550
We're going to change the wording of the label from "Choose a file" to whatever we want.

18
01:10.580 --> 01:11.690
So it's going to be really cool.

19
01:11.810 --> 01:19.160
So the first step is, is let's grab all our main elements, grab our main elements.

20
01:20.540 --> 01:22.340
Firstly, I want to grab the input, right?

21
01:22.340 --> 01:27.290
So the input with type file and I'm going to access our document [object]. On there, 

22
01:27.290 --> 01:31.730
I want to use the ... what should we use ... the querySelector maybe?

23
01:31.880 --> 01:33.530
Yeah, let's use the querySelector.

24
01:33.530 --> 01:40.760
There's many ways to do things and I want to grab all our elements with a class of uploadFile.

25
01:40.760 --> 01:41.900
That's what we called it, right?

26
01:41.900 --> 01:46.850
And we've only got one input with this class on and this querySelectorAll()

27
01:46.850 --> 01:48.740
method, by the way, returns a collection.

28
01:48.740 --> 01:51.170
So we want the first item in the collection.

29
01:52.560 --> 01:55.460
If you're a bit confused, please check out my DOM course.

30
01:55.470 --> 01:57.120
But if you're following along, great.

31
01:57.690 --> 01:58.380
So there we go.

32
01:58.380 --> 01:59.340
We've got our input file.

33
01:59.340 --> 02:04.050
The next thing I want to grab is our label, and we can do this in many different ways.

34
02:04.050 --> 02:07.080
I just want to show you different ways to do it.

35
02:07.080 --> 02:09.150
So let's define a variable called label.

36
02:09.150 --> 02:16.470
And here we can use our input file, and we can ask for the nextEelementSibling, because we know straight

37
02:16.470 --> 02:18.360
after that input, is the label.

38
02:18.360 --> 02:18.840
So there we go.

39
02:18.840 --> 02:22.470
We've got our input, we've got our label, we need the label because we're going to be changing its

40
02:22.470 --> 02:28.140
text, right. Actually, which means we should probably set up a variable, let's call it labelText,

41
02:28.140 --> 02:32.550
and that's going to be our label and it's going to be what is the text inside it,

42
02:32.550 --> 02:34.020
the innerHTML property.

43
02:34.050 --> 02:38.820
Right now it is "Choose a file", but we're going to change it.

44
02:38.940 --> 02:40.020
Let's just make this bigger.

45
02:41.510 --> 02:42.050
How's this?

46
02:42.080 --> 02:43.790
It's looking good right. Now, 

47
02:43.790 --> 02:47.630
the next thing I want to do, is I want to add an event listener on the input file.

48
02:47.630 --> 02:54.890
So, if we look at the browser, okay, every time a user uploads a file, for example, let's just go

49
02:54.890 --> 02:56.150
to file1.txt.

50
02:56.150 --> 03:01.600
If the user clicks open, a "change" event is fired.

51
03:01.610 --> 03:04.250
This automatically happens in the browser.

52
03:04.250 --> 03:05.710
We don't have to code this up.

53
03:05.720 --> 03:09.350
These events are automatically linked to the input of type file.

54
03:09.350 --> 03:15.290
So whenever a file is submitted, just remember the change event has been fired.

55
03:15.290 --> 03:17.360
So I want to listen for that change event.

56
03:17.360 --> 03:22.970
And when that change event happens, I want to grab information from the file, and put it inside the text

57
03:22.970 --> 03:23.780
of that label.

58
03:24.020 --> 03:25.100
That's what I want to happen.

59
03:26.190 --> 03:26.970
So let's do that.

60
03:26.970 --> 03:29.040
Let's grab our input file. On here,

61
03:29.040 --> 03:33.930
I want to add an event listener, and we are listening for the change event.

62
03:34.990 --> 03:39.400
And again, I talk about this in my other courses, but what happens with the event listener is that

63
03:39.400 --> 03:41.650
what's returned to us is an object.

64
03:41.690 --> 03:44.230
It's almost like the event object itself.

65
03:45.560 --> 03:51.380
So let's grab that event object, and put it in a variable called "e".

66
03:51.560 --> 03:56.270
This is just kind of call it standard practice in the development industry.

67
03:57.690 --> 04:01.410
Okay, so what do we want to happen when that change event is submitted?

68
04:01.440 --> 04:03.960
Well, firstly, I want to eventually get the file name.

69
04:03.960 --> 04:06.150
So let's define a fileName variable.

70
04:06.150 --> 04:07.530
And right now it's empty.

71
04:07.560 --> 04:09.630
Let's just set it as an empty variable.

72
04:10.290 --> 04:12.740
Later on, we're going to get it, and you'll see how we do it.

73
04:12.750 --> 04:17.790
The next thing I want to do is I want to use the File API.

74
04:18.300 --> 04:27.270
So let's use the File API to get the file name and number of files.

75
04:28.310 --> 04:33.770
And remember I said that, you know, with an input of type file, there's an automatic property, which

76
04:33.770 --> 04:35.680
is actually a big object called files.

77
04:35.690 --> 04:36.880
This is [from] the File API.

78
04:36.890 --> 04:40.850
So all I need to do, is I want to grab that file

79
04:41.720 --> 04:42.500
input.

80
04:42.680 --> 04:43.880
I'm just going to call it file.

81
04:45.150 --> 04:47.820
I want to grab that input, 

82
04:48.120 --> 04:49.230
getElementById() ...

83
04:49.380 --> 04:50.400
we've called it file.

84
04:50.400 --> 04:52.970
And on here there's a property called files.

85
04:52.980 --> 04:56.460
So now we've got call it the File API.

86
04:56.510 --> 04:58.440
I've just put it in a variable called file.

87
04:59.100 --> 05:00.600
Now what do I want to do?

88
05:00.630 --> 05:05.190
Well, my dear students, I'm almost thinking the best approach, right, is if there's more than one

89
05:05.190 --> 05:11.040
file selected, I just want to display on that label the amount of files, like 2 files have been selected, 

90
05:11.040 --> 05:11.800
or 3.

91
05:11.850 --> 05:17.460
I don't want all the file names to be in that label because that label could eventually get really big.

92
05:17.520 --> 05:19.140
It just won't look visually appealing.

93
05:19.140 --> 05:23.190
But if there's only one file, I wouldn't mind just putting that file name in that label.

94
05:23.580 --> 05:24.630
So why don't we do that?

95
05:24.630 --> 05:28.950
So let's just set up an IF statement and we can say If the length of the file.

96
05:28.950 --> 05:29.270
Right.

97
05:29.340 --> 05:32.370
And this is where I said that File API has a lot of properties and methods.

98
05:32.370 --> 05:37.740
One is called length, and it just defines the amount of files that have been uploaded on that button.

99
05:37.740 --> 05:41.640
If that is greater than 1, then what do we want to happen?

100
05:41.640 --> 05:47.080
Well, firstly I want to figure out how many have been uploaded, so let's just call that fileNumber

101
05:47.080 --> 05:48.340
for lack of a better word.

102
05:48.340 --> 05:51.400
And that's going to be that File API variable we got,

103
05:51.400 --> 05:55.090
and it's got a property called length.

104
05:57.000 --> 05:57.620
Length.

105
05:58.350 --> 06:01.390
And then remember how we got that label element?

106
06:01.420 --> 06:02.940
Well, I want to grab that label element.

107
06:02.940 --> 06:07.440
I want to change its innerHTML and I want to assign it to a value.

108
06:07.440 --> 06:10.140
I'm going to use Template Literals here because it's so much easier.

109
06:10.290 --> 06:13.020
And let's just say uploaded,

110
06:18.010 --> 06:19.840
fileNumber files.

111
06:21.250 --> 06:25.510
And if you're not sure what Template Literals are, it's actually just an easier way for us to include

112
06:25.510 --> 06:28.400
JavaScript variables inside text.

113
06:28.470 --> 06:32.650
You know, here we've got the text uploaded and files and we're putting that variable fileNumber within

114
06:32.650 --> 06:32.800
it.

115
06:32.800 --> 06:36.880
And in order to put a variable inside Template Literals, you just have to use the dollar sign and curly

116
06:36.880 --> 06:37.410
brackets.

117
06:37.520 --> 06:40.750
That is all what that is. Then we've got ELSE, right?

118
06:40.750 --> 06:43.930
So now we know the file length is equal to one.

119
06:43.930 --> 06:45.280
It's not greater than one.

120
06:45.280 --> 06:48.100
In that case, I just want to grab the file name.

121
06:48.100 --> 06:52.120
So let fileName equals our file variable.

122
06:52.120 --> 06:58.690
And we know there's only one item within here, and we want to get its name value.

123
06:59.050 --> 07:02.590
That's all we want to do. And then we want to access our label again.

124
07:02.590 --> 07:07.060
We want to change its innerHTML this time to the fileName.

125
07:07.540 --> 07:08.560
Bob's your uncle.
(music starts)

126
07:09.640 --> 07:10.950
I just hope it works now.

127
07:10.960 --> 07:13.000
So let's go to the browser.

128
07:13.540 --> 07:15.040
Let's choose a file.

129
07:15.730 --> 07:17.380
Let's go one file,

130
07:17.380 --> 07:18.190
file1.txt. 

131
07:18.820 --> 07:19.480
Come on.

132
07:19.480 --> 07:21.350
How cool is that?

133
07:21.350 --> 07:21.560
Woohoo!

134
07:23.920 --> 07:24.550
How awesome is that?

135
07:24.550 --> 07:26.590
But now let's choose two files and see if that works.

136
07:26.590 --> 07:27.610
So we click on here.

137
07:27.640 --> 07:31.900
Let's go file1.txt and debug.log.

138
07:31.900 --> 07:33.220
Upload it to files.

139
07:33.250 --> 07:37.150
No way my dear students, isn't this awesome?

140
07:37.210 --> 07:38.830
Hope you're having as much fun as I am.

141
07:39.340 --> 07:40.810
I know this is quite in depth.

142
07:40.930 --> 07:47.320
We used the File API, we used some JavaScript, but you can see that although the input of type file

143
07:47.320 --> 07:51.640
is a difficult widget to work with, you can indeed work with it, and we should.

144
07:51.640 --> 07:55.840
You know, when you're asking, you know, building forms and asking users to upload files,

145
07:56.930 --> 08:01.820
we should make it as intuitive as possible and as easy as possible for the user to know what's going

146
08:01.820 --> 08:02.210
on.

147
08:03.890 --> 08:07.910
Anyway, I know we've covered a lot and we've still got a long way to go.

148
08:08.060 --> 08:09.710
See you in the next lecture.