Now that's it for this course section.
We had a look at file uploads
and we learned about this input type file,
which we can add to our HTML elements
to give the user a file picker.
We learned how we can configure it
to only accept certain files.
And we learned that we have to configure our form element
and add this enctype attribute
and set it to multipart form data
as soon as we have at least one file in the form,
then this form with that file can be submitted.
And then we have to handle it on the server side,
which we can do with a middleware like Multer.
Multer can be configured as you learned
so that you have full control over the path
where the uploaded files are stored and the filename.
And that's important.
Files are stored on the hard drive in your file system.
You don't store them in databases.
Instead, it's the path to a file
that you store in a database.
That is what we're doing down here in this post route.
We're inserting a new document
and it would be the same for SQL.
There, we also don't store the file,
but instead, we insert data with some extra data
like the username and then a path to the file.
Then we can, of course, fetch that data when we need it
and we can then, of course, also use it in our templates
to output that image if that is our plan.
Of course, not all uploaded files have to be output,
but a lot of them do and that's how you can do that,
at least regarding the template.
It's always important to keep in mind
that you need to serve your files
if you wanna serve them and show them to your users.
If you don't wanna do them,
of course, you don't have to serve them.
But if you have images that should be visible to all users,
you have to statically serve your files.
Here, I'm using this middleware like this
with that filter path here in front of it
so that requests to /images/filename work
and don't go into the void.
And last but not least,
we also had a look at previewing files.
That's not something that's built into the browser,
not a core HTML feature, but it's easy to implement
with a couple of lines of browser side JavaScript
as you see here with this example.
And that's it for this section.
That's how we can add file upload.
And since that is a feature
you typically do add to a lot of websites,
that's definitely something you should know.
And now you do, I guess.