- [Instructor] With this Image Handling functionality
in place for this route, let's try out the form
and create a user.
So, I create a random user, tim@example.com.
I now have to remember these credentials
because I want to login with it later.
Some password,
and I will use some PNG picture to upload.
Let's hit Submit.
And next, I will login with this credentials.
And we now see that up there on the top right,
we see this broken image.
This is because the template contains
a logic to show a thumbnail if the user
has a file pass for avatar set.
Additionally, when I click now
on this broken image, and go to my account.
I see that we also have this image problem here
because also here I want to show an avatar picture.
So, what we have to do now is we have to implement
the logic to surf those pictures.
Let's head back into Visual Studio Code,
and there, let's really click look at the templates,
so that we better understand what we are doing.
In Layout includes Header.
We see that around line 36,
we want to surf from users/avatartn.
This should be the thumbnail,
and we will pass in the file name of the avatar.
Also, when we look into Users Account,
we see that we want to surf here from users/avatar.
This means we need two routes.
One for the avatar image as it is stored in the file system,
and also another route that will give us
a thumbnail of this avatar.
So, let's implement it now.
For that, I go back into Routes, Users, Index.js,
and let's first implement a route
that serves the avatar image.
So, for that, let's go to the very bottom,
and here I add router.get.
This should be avatar/
and we get the file name s argument,
request, response, next.
And first, we want to add a header
that tells the browser which image type
it has to expect.
So, I add res type.
PNG, that's a shortcut by Express.
It will then create the correct image header,
and I will return res.
And now, we are using sendFile.
That's a method provided by Express.
And we can simply here use avatars, and the file pass.
Put a file name.
We just got through the Params.
Request, params.filename.
We don't need a Next here, so let's remove that.
Let's restart the application,
and head back to the website,
and let's reload the account page.
And now, the uploaded picture is shown as avatar picture.
Then, we also have to implement
the route for the thumbnail.
So, I'm heading back to Visual Studio Code,
and there I go into Services, Avatar Service.
And we now have to create a function
that creates a thumbnail.
And that's quite easy.
So, I simply create an Async function
and I call it thumbnail,
and it gets a filename,
and it will then return sharp,
and it should load the file,
and with this given filename from the file pass.
Then, we call .resize.
I want to make it 50 times 50.
And then, I want to simply create a buffer from it.
So, I'm not storing this file at all,
I'm simply returning binary data from this function.
And back in Index.js, I will now
copy the route for the avatar.
I call it route to get avatartn for thumbnail,
and the file name.
And now, we have to call this
newly created thumbnail function, so I add,
const tn
= await
avatars.thumnail
(req.params.)filename.
And then, I will now replace the sendFile with res.end,
and we simply pass in the binary buffer
and add a second argument binary.
And Express will take care of the rest.
And we also have to make this function Async.
Let's reload the application.
And on the website, let's reload.
And now, we also have an avatar picture
as thumbnail for the user menu.
This is now, also, a good occasion
to run all tests that come with the project.
So, I will now simply run, npm run.
And this will recursively run all tests
in the test directory.
And let's see what it gives us.
It can take a little bit because it's still plenty of tests.
It looks good so far.
It's always an exciting moment in a project.
And we see that all 32 tests are passing.
This means that we have now flashed out
all application logic needed.