That pool 🏊‍♂️ looks amazing.
I just want to jump in there 🏃.
But anyway, before I do, I just want to I want to go through an example with you.
And it's going to be an advanced example.
We're going to have to create a server.
So don't worry if you don't understand server side code, this is not what this course is about.
But I will kind-of high level, run you through what I'm doing.
I'm going to code up the server in real time with you.
So you can follow along.
It is going to be advanced like I said 😰...
but don't panic if...
you don't fully understand what's going on. But you will see the difference between multipart...
and using the default encoding type attribute.
Another weird thing with this example is that Chrome doesn't allow us to view the HTTP body or the data
in the body.
So we're going to be using Firefox.
But again, don't panic.
I'm going to show you why or where we can't see it in Chrome, and why we need to go Firefox.
I'm super excited for this lecture because, you know, it took me a long time to learn this stuff.
And I think it's very hard to find, you know, the answers to these questions online.
So really, it's going, it's going to get you going.
Hope you're having fun.
Hope you're learning a ton.
But enough said...
let's, um, let me hop on the computer. Let me go inside.
I really, really want to swim, but that's going to have to wait ☹.
Let's start coding. See you now.
That's right...
we're going to be looking at an example now, and it's going to be really cool.
It is going to be a little advance because I want to set up a server.
This lecture should really drive home the point as to why you would sometimes want to use multipart/form-data...
versus the default encoding type. But enough said, let's start coding.
So here we go,
I've got a blank Visual Studio Code project open.
I've literally just created a blank, or an empty folder on my desktop, called "ENCTYPE TEST".
Why don't we just start off by creating our index file.
This is kind of the starting point of our app. Okay, let's just create a very simple HTML5 template,
nothing you really haven't done before.
But what I want to do now, is I want to have file uploads.
So let's just call this title "Uploads". And within our body, I'm sure you can guess what we want...
we want to create a form.
How do we create a form?
That's right.
The starting point is to wrap our entire form within a <form> tag.
So, let's do that.
We haven't really been dealing with actions yet, have we?
But now I want to have an action.
And the reason why I want to specify what happens is I want to send this data to a server.
I want to start analyzing and looking at the body of the HTTP request.
And in order to do that, we need a server.
So, let's just set up a server 🗄️.
And let's call the server, we'll just run it obviously from my machine, which is why it's just going...
to be "localhost" and let's put it on port 8000.
When we set up the server, we have to use the same port number.
So just remember that we've used 8000. In this case,
we want to use POST, because we want to start looking at the multipart/form-data encoding type, remember?
So here we go, encoding type...
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.
I want to have a lot of inputs here.
Let's do input type of text,
and have a name as, let's just call it "text1", for lack of a better word. We don't need an ID...
but let's have a default value...
and that can just be set to "text default". Straightforward. Let's just duplicate that, and here, let's...
have a name of "text2", and its value...
I just wanted to show you something really cool...
I want to use a Numerical Character Reference 🤯😵.
Remember, we spoke about that? And I just want to do it, because I want you to see how the browser can...
switch between the two.
It's just interesting.
So let's do the letter, or character "a", so that's not a numerical character reference...
but when I use the "&#x", now the browser knows, hey, this is now going to be...
a numerical character reference. And let's use 263A...
and finish it off with that semicolon.
When I do this, this is a code (or clue) to the browser that now I'm using a Numerical Character Reference. (background music)
And then let's finish off with the character "b". The character "b" of course, is just an ASCII
character - it is not a Numerical Character Reference.
So what is this going to be converted to?
Well, it's going to be converted to "a ☺ b". Why☺?
Well, because the smiley face is represented in Unicode as 263A.
Just in case you're wondering, this entire value will be converted to the bytes 61e298...
BA62 in utf-8.
I know, I know, I'm just being a nerd right now 🤓.
We didn't really have to do that.
I'm just wanting to show you how the browser can convert between the two.
I just thought it's interesting.
Something new to look at.
I now want to do something different...
my dear students, I want to add files.
So instead of the input type ... you know what, let me delete it. And let's just start from scratch.
We want an input element, but this time we want its type set to "file".
I know we haven't really gone into this, but, you know, it's intuitive.
We're wanting this to be a file type widget.
It's name we can just state as "file1" and we don't need an ID.
You know, we're not styling here. And I want two input, inputs,
right, two file inputs.
Finally, I want the user to be able to submit all of that data. In order to do that, let's just put a...
button of type submit.
Whew 😅! I think this is pretty straightforward, right?
There's nothing else we really need to do on the index.html file.
The only thing I want to add now are the files, because as you can see, we've got two input type files,
but we haven't created the files yet.
So let's just say one file is a text file.
OK.
And here we can just have "blah blah", it can be whatever. So that's our one file.
The next file I want to create is, let's say its an html file.
It could be anything, it could be an image, whatever we want.
But let's just say it's an html file.
And here, I'm just going to write some HTML.
"Content of my HTML file".
There we go.
So if we go back to our index file, we've literally created the base of our entire example. But yes,
we are missing the server, aren't we?
But I want us to take a break now, because this is just getting a bit long.
And in the next lecture, why don't we set up the server together?
I am super excited. See you now.