Now, let's get started by understanding
what exactly makes up file uploads.
And there actually are two involved parts here,
two sites that are involved.
And that's the client side
and the backend, the server side.
So the two sides, which are always involved
with anything that happens on our website,
as you can probably tell by now.
But when it comes to file uploads,
then it's the job of the client site to allow the user to
select a file.
Maybe we also want to show a preview there
and we're going to see how that would work
throughout the discourse section as well.
And then of course,
we need a way of submitting that selected file to the server
to the backend so with that there,
it can be stored.
Because, of course, that's typically the goal.
You are uploading a file
so that it's getting stored on some servers.
If you create a Facebook profile,
then you probably upload an image of yourself
and that image gets stored on Facebook's servers
so that it can then be shown to all your friends
who might visit your profile.
So that is then what we'll do on the backend.
What do we have to do on the server side?
We need to take that incoming file
and we need some way of extracting it
from the incoming request.
Just like we extract other data from the incoming request.
Maybe it's also file combined with some other data
like your username.
And then we need to store that file on the backend.
And if that's the goal, we also need a way
of making it available to the public again.
So that we can serve it to the public.
These are the two sides that are involved and we're going to
go through these different steps and we'll have a look at
these different aspects throughout this section,
starting with the client side
and with an enabling users
to pick a file in the first place.
Now, for all of that,
I got a very simple dummy demo project for you,
which you find attached.
Attached, you simply find a zip file with a dummy project,
a node express project, where we got two views,
a couple of routes for rendering these views,
nothing too fancy there. And then some dummy styles.
I also got a data folder with some code about establishing a
database connection to a Mongo DB database.
And here I'm basically just implementing again what I showed
you in the last course section.
So if you skipped that section,
you might want to revisit it at least have a look at the
beginning of the last section,
so that you'll learn how you can establish a connection to
Mongo DB with node JS,
though, I'm giving that connection code to you here.
Nonetheless,
you need to that you got a running Mongo DB server on your
system if you want to follow along
since this dummy project I'm giving to you here
will connect to such a server.
Well, and then you can just extract that attached project
and as always, run NPM install
to install all the dependencies that are needed.
And then with NPM start,
you can start that server, that web server,
which listens on port 3000,
as you can see an app JS, and therefore,
you can visit local host 3000 to see this dummy
page on which we're going to work throughout the discourse
section.