WEBVTT 0 00:00.410 --> 00:01.100 Okay. 1 00:01.100 --> 00:02.120 Welcome back. 2 00:02.150 --> 00:04.070 Hope you are amped. I hope you're having a lot of fun. 3 00:04.310 --> 00:09.590 And it's quite difficult for me sometimes because later on I've dedicated an entire section to talking 4 00:09.590 --> 00:12.320 about CSS and styling of forms and widgets. 5 00:12.320 --> 00:18.860 And as you'll notice, you know, it's difficult because some widgets are very, very easy to style, 6 00:18.860 --> 00:22.130 like the input of type text, very, very easy to customize. 7 00:22.550 --> 00:26.450 Other form widgets are quite difficult to style. 8 00:26.600 --> 00:31.760 And one of these widgets is, you guessed it, the input of type file. 9 00:31.760 --> 00:38.210 It's not easy to style this widget. And I could have done this example in the styling section and I decided 10 00:38.210 --> 00:41.960 to put it here because we are talking about the file type. 11 00:42.110 --> 00:46.490 And I just thought, you know, let's rather have all the file type lectures kind of in one place. 12 00:46.490 --> 00:50.000 So later on I am going to be talking about CSS, at a high level anyway. 13 00:50.000 --> 00:55.040 This is not a course on CSS, but this input of type file is a tricky one to style. 14 00:55.040 --> 01:02.070 And for that reason I just thought, let me show you kind of a pro-tip if you will, or a nice workaround. 15 01:02.430 --> 01:04.560 So let me first show you that it is difficult to style. 16 01:04.920 --> 01:07.680 As always, let's start with an HTML file. 17 01:08.160 --> 01:09.360 The head. 18 01:09.390 --> 01:11.340 We are going to apply some CSS. 19 01:11.370 --> 01:12.360 Not now though. 20 01:13.860 --> 01:14.610 Body. 21 01:14.610 --> 01:16.950 Let's have a form. Action, 22 01:16.950 --> 01:18.390 we don't need an action. 23 01:20.390 --> 01:23.960 You know, typically with with files, we're going to be using a POST request. 24 01:24.110 --> 01:29.270 Remember I said you must set its encoding type to multipart/form-data. 25 01:29.630 --> 01:32.540 Don't forget to do that when dealing with files. 26 01:32.540 --> 01:36.860 And let's just have a div with a class of container. 27 01:36.890 --> 01:39.020 We don't actually need it, sorry, it's just habit. 28 01:39.050 --> 01:43.370 It's always good to wrap things in containers when it comes to styling things later, but I'm not too 29 01:43.370 --> 01:45.140 concerned about styling in this course. 30 01:45.760 --> 01:49.490 Um, then we want input of type file. 31 01:50.300 --> 01:54.410 We can give it a name of "file". Arg, a name of "file". 32 01:54.410 --> 01:58.670 Sorry, not name. The ID we can give as "file". 33 01:58.880 --> 02:03.920 Let's give it a class of "uploadFile". 34 02:03.920 --> 02:10.850 And remember I said if you want the users to be able to select multiple files, you can use the multiple 35 02:11.300 --> 02:13.190 attribute. And it's a boolean attribute, 36 02:13.190 --> 02:14.630 meaning it's either there or it's not. 37 02:14.630 --> 02:15.980 So we don't have to assign it a value. 38 02:15.980 --> 02:20.280 It just needs to be present. And let's open this up in Live Server. 39 02:23.380 --> 02:23.950 There we go. 40 02:24.850 --> 02:29.080 Right. So it's just a file picker widget and this is displayed by the browser. 41 02:29.080 --> 02:30.400 But what's difficult, right, 42 02:30.400 --> 02:36.610 if we try and target this input, for example, and we try and change its background, its background 43 02:36.610 --> 02:43.330 colour to red, can you see that we actually can't style that actual "Choose Files" box. 44 02:43.390 --> 02:49.360 And this is such an annoying thing and it just becomes very difficult to style this widget. 45 02:49.360 --> 02:53.980 And I've seen quite a few different techniques on how people try and solve this problem. 46 02:53.980 --> 03:01.030 I mean, one technique is trying to wrap the input element into a container that mimics a button, and 47 03:01.030 --> 03:03.340 then the input had to kind of follow the cursor. 48 03:03.340 --> 03:07.510 And then when the cursor clicks on the button, it's actually clicking on the input of type file. 49 03:07.510 --> 03:09.760 It gets really messy. 50 03:10.060 --> 03:18.070 One quick, quick way though, that you can get around all of this is why don't we style a label and 51 03:18.070 --> 03:21.550 just hide the actual input itself. 52 03:21.550 --> 03:22.060 Remember, 53 03:22.060 --> 03:28.340 because remember, if we include a label and we attach it to an input, a user can click the label and 54 03:28.340 --> 03:30.980 it automatically toggles that input that we assign it to. 55 03:31.220 --> 03:35.780 And then we can easily, easily apply styling to a label. 56 03:35.810 --> 03:36.950 It's kind of a pro tip. 57 03:36.950 --> 03:38.270 It's kind of a cool workaround. 58 03:38.270 --> 03:38.780 Let me show you. 59 03:38.780 --> 03:39.980 Let me show you exactly what I mean. 60 03:39.980 --> 03:41.270 What can we do first? 61 03:41.270 --> 03:44.720 So let me include a label. 62 03:44.720 --> 03:45.530 So here we go. 63 03:45.560 --> 03:51.350 Label "for" ... we've got to match the ID that we gave to the input, which is file. 64 03:51.740 --> 03:56.090 And here we can ask the user to choose their file. 65 03:56.900 --> 04:00.350 Choose a file/files. 66 04:00.420 --> 04:00.640 Okay. 67 04:00.710 --> 04:01.730 We save this. 68 04:02.660 --> 04:03.760 Let's just get rid of the "s". 69 04:05.680 --> 04:07.360 There - choose a file. 70 04:07.990 --> 04:09.130 Okay, so we've got that. 71 04:09.130 --> 04:15.370 And we know as a label, if I click on "Choose a file" with my mouse, okay, that's what I'm going to 72 04:15.370 --> 04:15.700 click on now. 73 04:15.760 --> 04:17.590 I'm not clicking on the actual input. 74 04:17.590 --> 04:19.420 I'm clicking on the label. 75 04:19.720 --> 04:22.780 It's going to open up that input of type file. 76 04:22.780 --> 04:29.020 This is exactly what we wanted. And if we look on documents, I can attach ... let's attach a text file. 77 04:29.050 --> 04:29.800 How's that? 78 04:29.830 --> 04:30.700 There we go. 79 04:30.700 --> 04:36.280 So I've just attached a text file called File1.txt by the way. But it looks a mess, and we can't style 80 04:36.280 --> 04:41.620 it nicely when we're working with the default form widget provided by the browser. 81 04:41.620 --> 04:42.500 So what do we do? 82 04:42.520 --> 04:45.100 Let's keep the label and let's hide everything else. 83 04:45.130 --> 04:45.640 Okay. 84 04:45.670 --> 04:47.500 It's going to be super, super easy. 85 04:47.500 --> 04:49.030 Let's get rid of this input for now. 86 04:50.660 --> 04:54.320 Uh, we gave the input a class of uploadFile 87 04:54.360 --> 04:54.890 right. 88 04:54.890 --> 04:56.540 So upload, 89 04:56.570 --> 04:58.070 uploadFile. 90 04:59.080 --> 05:00.190 And why don't we just hide it? 91 05:00.190 --> 05:01.540 display:none. 92 05:02.440 --> 05:02.940 There we go. 93 05:02.950 --> 05:03.910 We've literally hidden it. 94 05:03.910 --> 05:10.450 But again, if I click on the label, it works exactly the same because we've associated it with that 95 05:10.450 --> 05:11.830 input of type file. 96 05:11.860 --> 05:12.610 Very, very cool. 97 05:12.640 --> 05:13.150 Right. 98 05:13.600 --> 05:15.460 And there's a lot we can do here. 99 05:16.060 --> 05:17.590 Firstly, let's style that label. 100 05:17.590 --> 05:24.090 So let's grab the actual main element, uploadFile and we want to style its label. 101 05:24.100 --> 05:24.970 I don't know what you want to do. 102 05:25.000 --> 05:28.120 Maybe we want to font ... font-weight, 103 05:28.810 --> 05:30.430 let's make it a bit more bold. 104 05:31.000 --> 05:35.710 And here of course we can have a cool background color like a red but I don't like red. 105 05:35.710 --> 05:36.940 I want it to be a bit more 106 05:37.180 --> 05:38.000 a bit darker. 107 05:38.020 --> 05:38.920 Let's try that. 108 05:39.220 --> 05:39.420 Oof! 109 05:39.430 --> 05:40.420 It's a bit too dark. 110 05:42.330 --> 05:42.860 That's okay. 111 05:45.330 --> 05:45.870 Cool. 112 05:46.770 --> 05:49.320 We can make it white color. 113 05:49.350 --> 05:50.220 How's that? 114 05:50.640 --> 05:51.990 We can add some padding. 115 05:52.110 --> 05:53.310 10 pixels. 116 05:53.970 --> 05:57.230 Another thing is, if I hover my mouse over this "Choose a file", nothing happens. 117 05:57.230 --> 06:00.810 So I mean, let's set the cursor property to pointer. 118 06:00.810 --> 06:03.720 So at least it's a hand symbol when you hover over it. 119 06:05.290 --> 06:07.200 And display ... 120 06:07.210 --> 06:09.250 we don't really need to do this, I guess. 121 06:09.290 --> 06:10.330 Inline block. 122 06:11.290 --> 06:11.880 There we go. 123 06:11.890 --> 06:13.480 Just adds a bit of margin to the top. 124 06:13.480 --> 06:20.020 And there's our cool file picker. So you can already see how intuitive it is and what a cool little 125 06:20.140 --> 06:21.310 trick we've done. 126 06:21.330 --> 06:21.940 Right? 127 06:22.180 --> 06:22.660 How cool. 128 06:22.660 --> 06:23.980 So there we go. 129 06:23.990 --> 06:29.110 Another thing, though, you'll notice, though, if I do select the file and I can hold the control 130 06:29.140 --> 06:30.310 key and select a few, 131 06:30.340 --> 06:30.880 right. 132 06:31.660 --> 06:33.340 There's no visual cue. 133 06:33.370 --> 06:35.170 There's no visual cue of what's happening. 134 06:35.170 --> 06:40.450 And in order to do that ... whew ... maybe I should include it. 135 06:41.380 --> 06:45.370 Yeah, we're going to need to use JavaScript. And this lecture is getting a bit long, so let me stop 136 06:45.370 --> 06:47.050 it here. If you are interested, 137 06:47.050 --> 06:47.280 right, 138 06:47.290 --> 06:51.520 it's going to be a bit advanced because we're going to be using JavaScript, but we can make it more 139 06:51.520 --> 06:59.170 visually appealing or it can just improve the user experience if we have the file name or if we even 140 06:59.170 --> 07:02.440 include how many files have been uploaded so the user knows. 141 07:02.800 --> 07:04.810 So if you are interested, check out the next lecture. 142 07:04.810 --> 07:10.000 If you're not, skip the next lecture and I'll see you in two lectures on. Bye.