In this lesson you're going to learn how to serve up your user avatars.
So we already explored one way we could get this done.
We just need access to the binary data.
We could use our read profile a request to get the data then we could go ahead and use an image tag
like we did in the last lesson to render the image.
Now the other approach we're going to explore is how we could set up a you are well that's going to
serve that image up.
This is a U.R.L. we could use in our image tags when we're creating the client.
And it's also something we could just visit in the browser to view the profile picture.
So to get this done we'll be setting up a third and final route related to user avatars.
This one will be for fetching an avatar and actually getting the image back down below.
Let's go ahead and set this up using another call on router and this will be a an HDTV get request.
So right here that is router dot get to get the image and we're going to stick with the following You
are Rel structure its forward slash user's forward slash colon idea forward slash avatar.
So this will provide us with a way to get the avatar for a user by their I.D..
Next up we're gonna go ahead and set up our route handler.
So we'll have a request and response set up.
And right here I do plan on using a wait.
So I am going to set this up as an asynchronous request.
Now down below we can focus on getting the avatar for that user and figuring out how exactly we can
serve that file data up.
So when someone visits the U.R.L. they see an image as opposed to seeing just a bunch of binary text.
The first thing we're gonna do inside of here is set up a try catch block as there is a chance we might
not be able to find the image.
The person is looking for.
So right here we'll go ahead and set the try catch statement up and if we can't find things we'll just
send a 4 0 4 back right here response dot status setting and equal to a 4 0 4 and sending it back with
an empty response body now up above.
We want to start the process of looking for the image by the user I.D. So right here let's go ahead
and start by fetching the user concept.
User equals await with the following that is user uppercase U user dot find by I.D. things we've done
plenty of times before and we have the I.D. On request dot paradigms dot I.D. and then down below we
can see if we actually got a user back and if that user actually has an image.
So right here if our condition any code to run now in this case the code down below will be if things
went well and we have an image to send back the code in here is going to handle the case where there
is no user or the user doesn't have an image associated with their account.
So any condition we're going to see if there is no user or there is no user avatar field.
If either of those are true that's a problem for us and we are going to throw a new error that's going
to stop the execution of the try block and immediately jump down to catch.
So a forum for can be sent back.
Now we could choose to include an error message if we wanted to but send on since I'm not taking advantage
of it.
Down below it's completely optional and can be left off now right here we want to run the code we want
to run when things go well and there are two pieces to this.
The first yes is to send back the correct data but we also need to tell the requester what type of data
they're getting back in this case.
We have to tell them it is a j peg image if it was a PMG we would have to tell them it's AP and G image
and right here we get that done by setting a response header.
You can set up Response Headers by using the set method on the response object.
So for us that is r e s dot set and it takes two arguments a key value pair the name of the response
header we're trying to set and the value we're trying to set on it.
Now the name of the one we need to set here is content type.
It is a very popular header specified with almost every single response from any server ever.
Now if we don't specify our own Express is really smart and it can specify it for us which is why we
haven't had to do anything so far with this header.
When we send Jason back express automatically sets the content type header equal to application forward
slash Jason.
Now in this case we're not sending Jason back.
So we don't want to use this header value for content type instead we'll be using image forward slash
J P G perfect.
The last thing to do is to actually send the data back.
So response dot send.
That's gonna be user dot Avatar.
And with this in place we should be able to access the image for a user by their I.D..
This is something we should be able to access in an image tag or by just directly typing it in the browser.
So what I'm going to do is start by heading over to robo 3D and I'm going to copy the I.D. of my one
user to the clipboard right here.
I have that user I'm going to copy that I.D..
Now this user currently doesn't even have a profile image as we deleted it a bit earlier in the last
lesson over inside of postman.
Let's go ahead and recreate it.
I'll use upload Avatar once again to upload a profile pic I'll send that off and now they should have
a profile pic associated with them.
We can check this by heading over to the browser and messing around with it.
I'm gonna crack open a new tab and we're gonna head to local host on port three thousand forward slash
users forward slash the I.D. we copied to the clipboard forward slash Avatar.
When I do this I would expect to see that picture showing up.
And here it is.
So we've successfully allowed users to upload profile pictures and now we've also given clients a way
to fetch those profile pictures using the following You are our structure.
Now this is a regular image I could right click it and I could save it to my machine.
I could do whatever I wanted with it including using this inside of H2 UML markup to render the image
to my client side application whether it was a web app mobile app or any other app with an internet
connection.
Now let's grab this you are Al and see how we could use it in our HD AML.
So I'm going to copy this to the clipboard.
I'm gonna head back over to J S bean and we're simply going to delete this image tag altogether.
I'll highlight the entire line trashing it and we'll recreate the image tag from scratch.
That'll be an image I AMG.
Then we set up the source attribute this time around we're not doing anything complex so we don't have
to say that it's data of a specific type in this encoding We simply provide the U.R.L. when we do that
the browser automatically fetches the image.
And down below we can see it just like we had in the past.
So now we have a way for users to be able to access those profile pictures.
And that's where we're going to stop for this one in the next and final lesson for this section.
You're going to learn about how you can automatically crop and format images to fit your specific needs.
I'm excited to get to that.
So let's jump right in to the next lesson.