So how can we output the user data?
How can we output a list of users here on the starting page?
Well, in the route that is responsible
for rendering this page, this route here,
we want to fetch all the user data from the database.
So for this here, we can again,
get access to the database then to the users collection,
which is where the user data is stored.
And then with find to Array, we can find all the documents
without restrictions, without any filtering,
and then get an Array of all that data
with which we can work here in JavaScript.
That's what we did in the previous course section as well.
Now this is an asynchronous task,
so we handle it with async await.
And ultimately with that, we'll get our users.
Now we can pass the users here,
to profiles to this template.
And hence in the template, in the profiles.ejs file here,
we can now output this list item
dynamically with help of EJS.
So as we did it before in the course,
we can create a four-off loop to loop through
all the users, all of the users key here.
So that key, I'm making available to the template here.
And we have an opening curly brace here.
And then after the list item closing tag,
we have the closing curly brace with our EJS syntax.
And that will now repeat this list item for all the users.
That means that here, we can actually output user.name
to outputs the concrete user name. And here for the source,
we now want to output the user image,
and that should be the path of the image that we stored.
So this imagePath value, because that's the path
to the image on our server,
and that's exactly what I want to show here.
So here that's user.imagePath, like this.
With that, if we save this and we reload,
we see Maximillian, but the image is still missing.
And maybe you already know why it's missing,
but in case you don't, let's open up the developer tools.
And here in the console, we see an error message
that the server responded with a status of 404.
So it didn't find that file.
Now the file clearly is stored here.
We do have the images here,
but the reason why it's not found is that we're not
serving content from that images folder to our users.
Keep in mind, by default users can't
access your server-side files.
It would be pretty bad if they could.
That would be a huge security issue.
So by default, your files on the server,
all your files in all your sub folders
are not accessible by your website visitors.
They execute on the server and your visitors only see
the content of the files you are sending back to them.
And you send back content by using
the render method here, for example,
or in app.js by using this static middleware.
You might remember this middleware
from way early in the course.
When I introduced you to templates and static files,
I mentioned that with this middleware,
we can make the content of a folder available
to our users so that they can directly request those files.
And that was required for CSS or JavaScript files
or images that we might have on our website.
So that when a website requests a CSS file,
because we link to it, for example, that file can be served.
And now we have exactly that scenario
for the uploaded images.
We want to serve them statically.
If a file is requested, like it is here,
because here we got an image element
that is requesting this file that file should be served to
the user who is requesting the file.
So the user who is visiting this page.
And hence, what I want to do here
is I want to register express.static again.
This time, all the 40 images folder,
so that I don't just serve the public folder statically,
but also the images folder.
So now all the content in the images folder can also
directly be accessed by my visitors.
They won't be able to change or delete or do anything
with it, but they can view it.
And that's the important part here.
So by adding this middleware,
if you save that and you reload you're
one step closer to the desired goal.
But it still doesn't work here.
And the reason for it not working here
can be a bit tricky to see.
In the end, what we're doing here is we are
requesting a "slash" images
"slash" file name, URL path.
Now we're making images available here,
but actually that means that all the content
in there can be requested like this.
It does not mean that you have
to request "slash" images "slash" something,
but just to direct the something that sits in the file.
That's we also did for public.
If you have a look at the templates at the CSS files,
you see I'm requesting "slash" styles "slash" base.css
because in the public folder, I have a styles sub folder,
which contains base.css.
I'm not requesting "slash" public "slash" styles here.
So the folder name of the folder
which has the content that's made available
statically is not part of that link here.
And therefore, actually we should not request "slash" images
"slash" file name, but the file name itself.
However, that's not a must-do.
We can also configure this static middleware
such that we actually can request
"slash" images "slash" image name.
All we have to do for that is add a path here
"slash" images, and then add our middleware.
We can use a path filter on
the use method middlewares here as well.
That means that this middleware
will now only become active if a request reaches the server
that has a path that starts with "slash" images.
So it can be more than "slash" images,
but it has to start with "slash" images.
Other requests would be ignored.
That means that now if we have a request
for a "slash" images "slash" image name,
then this middleware would become active,
and then this request should work
as it's set up in our template.
Now, the reason for this working now is simply
that if you add such a filter here,
like in this case where I'm filtering for requests
that start with "slash" images,
then the path for which you are filtering,
so "slash" images here, is removed from
the incoming request path.
So if originally the browser is sent the request
for "slash" images "slash" max JPEG.
Now it's just four "slash" max JPEG without "slash" images.
And that then is found in the images folder,
and hence this file can be served to the client,
so to the browser.
So if we save this here with this adjustment made,
if we reload, here's my image.
So I hope it's clear what we did here,
which basically just make sure that now unlike before
the "slash" images "slash," before the file name
is not a problem anymore.
The alternative would have been to not do it like this,
and instead, make sure that we actually
output just the file name here instead of the image path
that includes the folder name as well.
So now with that, this is working
and now we got a basic form of file upload,
file storage and file serving implemented.