And actually we're going to start
on this add a new user page here, this page.
There I get a very simple form,
it's this new user EJS file which is responsible for it.
And there I got one input where I want a username,
so some simple text input.
And then I got this part here, where I want a user image,
and I got these question marks here
to signal that I will need to add something there,
because at the moment we've got no way of picking an image,
we can just click this button, but of course right now,
we're not yet ready to submit this form.
So how can we now ensure that a user
is able to select an image?
Well, thankfully that's a core functionality,
you are not the first one
who wants to add such a feature to a website.
And therefore, thankfully, there is an HTML element
that allows us to add a file picker.
And that indeed actually is the input element again,
which we already used up here,
and which we saw a lot throughout the course already.
But here we now don't want type text,
but instead there is type file, which you can set.
That's one of the built in types,
which is supported by all browsers,
and this will do what the name suggests.
It will in the end give us an input
that allows us to select a file.
Now we can give this an ID, image and a name,
like, image again.
And if we now save that and we then reload this form,
we got this file picker here,
which gives us this choose file button here, this option.
Now we can click this button,
and it will open this file picker for us here,
and you can then navigate around on your system
to select the folder where the file lives,
that you wanna upload.
And here I prepared a simple file, an image of myself here,
and you can of course, try this with any image.
It should be an image here
to proceed with the rest of this section,
because I will later also show you
how to preview this image, but theoretically of course,
you could pick any file.
But here I'm going to go with an image and I can click open.
Now we don't see a preview here.
We don't see a preview of the image,
that is something we would have to build on our own.
And it is something we will build on our own
throughout this section, but to get started,
to keep things simple right now,
we will just leave it like this.
And now we've got this file added here,
now we could enter a username as well,
and then submit this form.
But, before we do that there are a couple of other things
we might wanna do, and at least one other thing
we have to do.
Now let's start with the things we might wanna do.
Besides showing a preview,
which is something we'll explore later,
we of course might wanna configure this file input
a little bit more,
to control which kind of files are selected here.
For example, we can again add required,
to ensure that we must have some file.
If I set required here and I reload this page,
and I enter a username here, but then I don't choose a file,
I get a warning here,
so that might be something we might wanna do.
In addition, it's very likely that we don't wanna accept
all kinds of files, but that, for example here,
we want an image.
So therefore, thankfully with the file input,
we can also restrict the types of files
that can be selected here.
For this, to achieve this,
we can add an accept attribute here,
and then there you can simply list the file extensions
that you wanna allow, for example, .JPG.
And then this is a comma separated list,
you can add all the files you do want to allow,
like also JPEG with an E.
Now we can only select such files.
And to prove this, if I temporarily set this to only PNG,
and save that, and we then go back and reload.
If I click choose file, I can't select this JPEG file here.
So that's how you can control
which files can be selected here.
Now there are different ways of writing this.
You can list those extensions,
the dot is important in that case.
You can also write something like image, slash JPEG,
to allow all JPEG images,
no matter if the file ends with JPEG with an E,
or without an E.
And you can then also still combine that like this,
or you can type image, slash star to allow all images,
but for example, no PDF documents.
Here I will write image, slash JPEG,
comma image, slash PNG, to allow JPEG and PNG files.
With that if I reload, I can select my JPEG file here,
and I can also select that if it ends with JPEG with an E.
So now this can be selected,
and we now do have that file in this form.
Again, a preview might be nice to have,
but that's a little bit more advanced,
hence I'll dive into this later, and then for instead now,
I wanna focus on submitting this form,
on the client side for now.
Handling it on the back end
will be the next step thereafter.
And that is the mandatory step, which is not optional.
You might wanna control what gets selected here,
you definitely have to control
how this form is submitted, though.
Right now it's configured as a default form,
with some path and this method.
Now this worked up to this point in the course,
but as soon as your form includes files,
you have to add an extra attribute to your form.
And that's the enc type attribute.
This controls how the form is encoded,
so how that data, which is part of this page,
will be packed into the request body by the browser,
when the browser sends that request,
with that data to the server.
So the browser will do the heavy lifting,
but you have to tell the browser how it should be done.
Now the default mode is, application/x-www-form-urlencoded,
which sounds super weird and fancy,
but that's just a default way of submitting forms,
which we automatically used thus far.
Since it's the default, we didn't have to specify it.
But now we wanna use multipart/form-data.
That's the encoding type you have to choose,
if you have a form that includes at least one file picker.
If you have no file picker, you could also use it,
but then the other mode, the default mode is recommended.
But if you have at least one file,
you must switch to enc type, multi-part form data,
for that file to be submitted to the server successfully.
And therefore that was a mandatory step.
With that, if we now save this,
we would be able to submit this form,
as soon as we also enter a username.
But before we can do that,
we now of course have to move to the server side,
to the backend, and write some code there
to handle this incoming request,
and most importantly, to also handle the incoming file.