WEBVTT 0 00:00.770 --> 00:03.020 Welcome to yet another lecture. 1 00:04.160 --> 00:07.910 Are you beginning to see how powerful this input element is and why? 2 00:07.910 --> 00:13.010 I said it's perhaps one of the most complex in HTML because there are so many different types and it 3 00:13.010 --> 00:18.350 completely transforms the functionality of an input when you use different types. 4 00:18.350 --> 00:20.870 And now I want to talk about a very useful one. 5 00:20.870 --> 00:28.280 You're going to be using this a lot in your career, and that is when you allow the user to upload files. 6 00:28.280 --> 00:33.080 And here HTML gives us a very convenient type called file. 7 00:33.080 --> 00:40.670 So, what can I say about the file [type]? Well, obviously it allows the user to attach files to a form. And 8 00:40.670 --> 00:47.570 the file picker widget can be used to choose one or more files to send. And to create this file picker 9 00:47.570 --> 00:47.870 widget, 10 00:47.870 --> 00:51.200 all we need is the input element with its type set to file. 11 00:51.200 --> 00:52.680 You know this already. 12 00:52.760 --> 01:00.480 What's interesting though is that we as developers can restrict or constrain the type of files that 13 01:00.480 --> 01:01.710 we will accept. 14 01:01.740 --> 01:04.380 Say we don't want a video file. 15 01:04.380 --> 01:08.310 We can specify that. Say we don't want a PNG, we only want JPEGs. 16 01:08.340 --> 01:10.860 We can specify that. Well, how do we do that? 17 01:10.890 --> 01:11.430 Easy. 18 01:11.430 --> 01:17.160 The types of files that are accepted can be constrained using the "accept" attribute. 19 01:17.610 --> 01:20.010 Whaaat? The accept attribute. 20 01:20.010 --> 01:26.220 If you will recall, when discussing forms earlier on in this course, we mentioned that the accept attribute 21 01:26.220 --> 01:28.740 was removed by HTML5. 22 01:28.770 --> 01:35.340 But remember my students, this was in the context of using it on the form element itself. 23 01:35.430 --> 01:42.720 You can and should use the accept attribute on inputs with type file. 24 01:42.900 --> 01:44.820 And I've just given you an example below. 25 01:44.820 --> 01:52.410 Here we have defined the accept attribute as accepting all audio files, video files and image files. 26 01:52.410 --> 01:57.510 So just remember that although we shouldn't use it on the form wrap itself, we should be using it on 27 01:57.510 --> 01:59.460 the input of type file. 28 01:59.640 --> 02:03.750 And before we finish up, I just want to mention two more things. 29 02:03.750 --> 02:10.080 One, I want to mention that if you want to let the user pick more than one file, you can and you do 30 02:10.080 --> 02:15.960 so by adding the multiple attribute to your input, just like you see on the screen in front of you. 31 02:16.110 --> 02:17.700 So that's the first thing I wanted to mention. 32 02:17.700 --> 02:25.290 The last thing I want to mention is that for a file to be properly sent to a server, don't forget to 33 02:25.290 --> 02:31.380 include the multipart/form-data attribute to the form element itself. 34 02:31.380 --> 02:36.840 And I know it seems like a decade ago, but we did go through the multipart/form-data in a lot of detail. 35 02:36.870 --> 02:43.740 But to remind you on the actual form wrap itself, we set its encoding type to multipart/form-data. 36 02:43.740 --> 02:49.590 If you don't do that, the issue you'll have is that the file name will be sent to the server, but not 37 02:49.590 --> 02:52.380 the actual contents of the file itself. 38 02:52.380 --> 02:53.190 So there we have it. 39 02:53.190 --> 02:57.150 That's pretty much all I wanted to say on the input type file. 40 02:57.150 --> 03:00.540 It's a very intuitive widget. And keep going 41 03:00.570 --> 03:01.380 my dear students. 42 03:01.410 --> 03:03.660 Grab a coffee, grab a Red Bull, stay motivated. 43 03:03.660 --> 03:06.240 You got to keep going through this course. 44 03:06.270 --> 03:10.140 I know there's a lot we're covering, but it's really, really going to help you in your career. 45 03:10.140 --> 03:11.070 See you now.