WEBVTT 0 00:02.070 --> 00:03.810 That pool 🏊‍♂️ looks amazing. 1 00:03.840 --> 00:04.810 I just want to jump in there 🏃. 2 00:05.760 --> 00:10.260 But anyway, before I do, I just want to I want to go through an example with you. 3 00:10.260 --> 00:12.230 And it's going to be an advanced example. 4 00:12.360 --> 00:13.880 We're going to have to create a server. 5 00:13.890 --> 00:17.570 So don't worry if you don't understand server side code, this is not what this course is about. 6 00:17.910 --> 00:20.910 But I will kind-of high level, run you through what I'm doing. 7 00:20.910 --> 00:23.950 I'm going to code up the server in real time with you. 8 00:24.090 --> 00:25.460 So you can follow along. 9 00:25.620 --> 00:27.330 It is going to be advanced like I said 😰... 10 00:27.330 --> 00:27.900 but don't panic if... 11 00:27.900 --> 00:33.510 you don't fully understand what's going on. But you will see the difference between multipart... 12 00:33.510 --> 00:37.170 and using the default encoding type attribute. 13 00:37.480 --> 00:43.740 Another weird thing with this example is that Chrome doesn't allow us to view the HTTP body or the data 14 00:43.740 --> 00:44.250 in the body. 15 00:44.790 --> 00:46.170 So we're going to be using Firefox. 16 00:46.410 --> 00:47.280 But again, don't panic. 17 00:47.290 --> 00:53.050 I'm going to show you why or where we can't see it in Chrome, and why we need to go Firefox. 18 00:53.120 --> 00:57.720 I'm super excited for this lecture because, you know, it took me a long time to learn this stuff. 19 00:57.720 --> 01:02.070 And I think it's very hard to find, you know, the answers to these questions online. 20 01:02.490 --> 01:04.870 So really, it's going, it's going to get you going. 21 01:04.990 --> 01:05.770 Hope you're having fun. 22 01:05.790 --> 01:06.750 Hope you're learning a ton. 23 01:06.750 --> 01:07.410 But enough said... 24 01:07.590 --> 01:10.620 let's, um, let me hop on the computer. Let me go inside. 25 01:11.190 --> 01:13.680 I really, really want to swim, but that's going to have to wait ☹. 26 01:14.790 --> 01:15.990 Let's start coding. See you now. 27 01:22.840 --> 01:23.320 That's right... 28 01:23.680 --> 01:26.710 we're going to be looking at an example now, and it's going to be really cool. 29 01:27.040 --> 01:29.920 It is going to be a little advance because I want to set up a server. 30 01:30.040 --> 01:37.060 This lecture should really drive home the point as to why you would sometimes want to use multipart/form-data... 31 01:37.060 --> 01:42.180 versus the default encoding type. But enough said, let's start coding. 32 01:42.760 --> 01:43.360 So here we go, 33 01:43.370 --> 01:46.380 I've got a blank Visual Studio Code project open. 34 01:46.480 --> 01:52.540 I've literally just created a blank, or an empty folder on my desktop, called "ENCTYPE TEST". 35 01:53.950 --> 01:57.170 Why don't we just start off by creating our index file. 36 01:57.310 --> 02:02.770 This is kind of the starting point of our app. Okay, let's just create a very simple HTML5 template, 37 02:03.550 --> 02:05.550 nothing you really haven't done before. 38 02:06.010 --> 02:09.520 But what I want to do now, is I want to have file uploads. 39 02:09.700 --> 02:15.150 So let's just call this title "Uploads". And within our body, I'm sure you can guess what we want... 40 02:15.160 --> 02:16.450 we want to create a form. 41 02:16.450 --> 02:17.490 How do we create a form? 42 02:18.340 --> 02:18.790 That's right. 43 02:18.850 --> 02:22.820 The starting point is to wrap our entire form within a <form> tag. 44 02:23.290 --> 02:24.460 So, let's do that. 45 02:24.700 --> 02:26.970 We haven't really been dealing with actions yet, have we? 46 02:27.220 --> 02:29.220 But now I want to have an action. 47 02:29.230 --> 02:34.510 And the reason why I want to specify what happens is I want to send this data to a server. 48 02:34.700 --> 02:39.710 I want to start analyzing and looking at the body of the HTTP request. 49 02:39.850 --> 02:41.880 And in order to do that, we need a server. 50 02:42.430 --> 02:44.290 So, let's just set up a server 🗄️. 51 02:45.560 --> 02:51.980 And let's call the server, we'll just run it obviously from my machine, which is why it's just going... 52 02:51.980 --> 02:54.770 to be "localhost" and let's put it on port 8000. 53 02:55.690 --> 02:59.260 When we set up the server, we have to use the same port number. 54 02:59.680 --> 03:03.000 So just remember that we've used 8000. In this case, 55 03:03.010 --> 03:09.970 we want to use POST, because we want to start looking at the multipart/form-data encoding type, remember? 56 03:11.060 --> 03:12.740 So here we go, encoding type... 57 03:13.010 --> 03:17.670 well, you know what, let me not set it at first. Let's just leave it for now, and let's set up our form. 58 03:17.960 --> 03:20.020 I want to have a lot of inputs here. 59 03:20.850 --> 03:22.770 Let's do input type of text, 60 03:23.820 --> 03:29.880 and have a name as, let's just call it "text1", for lack of a better word. We don't need an ID... 61 03:31.380 --> 03:32.930 but let's have a default value... 62 03:34.050 --> 03:41.280 and that can just be set to "text default". Straightforward. Let's just duplicate that, and here, let's... 63 03:41.280 --> 03:44.580 have a name of "text2", and its value... 64 03:44.590 --> 03:47.280 I just wanted to show you something really cool... 65 03:47.650 --> 03:50.580 I want to use a Numerical Character Reference 🤯😵. 66 03:50.610 --> 03:55.530 Remember, we spoke about that? And I just want to do it, because I want you to see how the browser can... 67 03:55.530 --> 03:56.830 switch between the two. 68 03:56.910 --> 03:58.390 It's just interesting. 69 03:58.860 --> 04:05.850 So let's do the letter, or character "a", so that's not a numerical character reference... 70 04:06.660 --> 04:15.210 but when I use the "&#x", now the browser knows, hey, this is now going to be... 71 04:15.570 --> 04:20.160 a numerical character reference. And let's use 263A... 72 04:20.910 --> 04:24.440 and finish it off with that semicolon. 73 04:24.900 --> 04:30.000 When I do this, this is a code (or clue) to the browser that now I'm using a Numerical Character Reference. (background music) 74 05:19.920 --> 05:25.120 And then let's finish off with the character "b". The character "b" of course, is just an ASCII 75 05:25.140 --> 05:27.320 character - it is not a Numerical Character Reference. 76 05:27.360 --> 05:28.980 So what is this going to be converted to? 77 05:29.060 --> 05:33.990 Well, it's going to be converted to "a ☺ b". Why☺? 78 05:34.200 --> 05:39.470 Well, because the smiley face is represented in Unicode as 263A. 79 05:39.880 --> 05:45.180 Just in case you're wondering, this entire value will be converted to the bytes 61e298... 80 05:45.570 --> 05:47.760 BA62 in utf-8. 81 05:47.910 --> 05:50.120 I know, I know, I'm just being a nerd right now 🤓. 82 05:50.130 --> 05:51.430 We didn't really have to do that. 83 05:51.450 --> 05:54.180 I'm just wanting to show you how the browser can convert between the two. 84 05:54.180 --> 05:55.740 I just thought it's interesting. 85 05:55.740 --> 05:58.110 Something new to look at. 86 05:58.110 --> 05:59.280 I now want to do something different... 87 05:59.280 --> 06:01.680 my dear students, I want to add files. 88 06:02.310 --> 06:06.410 So instead of the input type ... you know what, let me delete it. And let's just start from scratch. 89 06:06.540 --> 06:12.110 We want an input element, but this time we want its type set to "file". 90 06:12.830 --> 06:16.800 I know we haven't really gone into this, but, you know, it's intuitive. 91 06:16.800 --> 06:20.730 We're wanting this to be a file type widget. 92 06:20.940 --> 06:25.200 It's name we can just state as "file1" and we don't need an ID. 93 06:25.730 --> 06:29.490 You know, we're not styling here. And I want two input, inputs, 94 06:29.490 --> 06:30.920 right, two file inputs. 95 06:31.080 --> 06:35.100 Finally, I want the user to be able to submit all of that data. In order to do that, let's just put a... 96 06:35.100 --> 06:37.200 button of type submit. 97 06:38.320 --> 06:40.760 Whew 😅! I think this is pretty straightforward, right? 98 06:40.780 --> 06:45.410 There's nothing else we really need to do on the index.html file. 99 06:46.120 --> 06:52.810 The only thing I want to add now are the files, because as you can see, we've got two input type files, 100 06:53.350 --> 06:54.820 but we haven't created the files yet. 101 06:54.970 --> 06:58.450 So let's just say one file is a text file. 102 06:58.650 --> 06:59.090 OK. 103 07:00.200 --> 07:04.760 And here we can just have "blah blah", it can be whatever. So that's our one file. 104 07:04.760 --> 07:10.120 The next file I want to create is, let's say its an html file. 105 07:10.880 --> 07:13.430 It could be anything, it could be an image, whatever we want. 106 07:13.430 --> 07:15.230 But let's just say it's an html file. 107 07:15.860 --> 07:17.780 And here, I'm just going to write some HTML. 108 07:19.150 --> 07:22.040 "Content of my HTML file". 109 07:22.870 --> 07:23.340 There we go. 110 07:24.530 --> 07:30.970 So if we go back to our index file, we've literally created the base of our entire example. But yes, 111 07:31.010 --> 07:32.900 we are missing the server, aren't we? 112 07:32.910 --> 07:37.520 But I want us to take a break now, because this is just getting a bit long. 113 07:37.790 --> 07:42.060 And in the next lecture, why don't we set up the server together? 114 07:42.200 --> 07:44.200 I am super excited. See you now.