- [Instructor] When we look at our registration form,
we see that it already contains a file upload field.
Now one could assume that this is sufficient
to send a file to a server.
Unfortunately, it's not that easy.
Let's fill out the form and inspect the payloads
to understand the problems
so I'm just putting in some bogus data.
Some password, and I will also
choose a file
to be uploaded and I'm opening from development tools
I select preserve log so that the redirect won't clear
the history and I click submit.
Now when I look into this registration request,
we see on the bottom of the headers the request headers.
If we scroll down in it,
we see that there is also a section for form data.
And there we see that we are transmitting a few fields.
If we look at the source, we see that the data
is encoded similar to a theory stream
if we do a get request.
We also see in the payload that while the file name
of the uploaded image was sent,
the binary data is missing.
This is because, to upload a file,
we need to change the encoding of the form
to multipart form data.
Let's do that in our template.
So for that, I'm heading back to Visual Studio Code
and then I'm opening server, views, users, registation.pug,
and there on the form I will now add
enctype=multipart
/form-data.
Now let's head back to the browser
and I'm using history back to get back
to the registration form and then reload it,
let's clear the log,
and now let's try to send the form again.
I'm again putting some bogus data
and I choose, again, a file and then submit.
We now see that the payload has changed drastically.
You see that, for instance, with the content type
that is set to multipart form data
and there is some boundary defined
and we also don't see any past form data
because it's now sent binary.
We now also get an error message
because the route is suddenly missing the data
and the validator of Mongoose kicks in.
This is because the expressed body parser
does not understand multipart bodies.
To make this work, we need a special middleware
that can work with such data.
In the following video,
we will change our registration route
so that it will be able to receive the avatar image
along with the other form fields in request body as before.