1
00:00:00,180 --> 00:00:03,930
In this lesson you're going to learn how to serve up your user avatars.

2
00:00:03,990 --> 00:00:07,110
So we already explored one way we could get this done.

3
00:00:07,110 --> 00:00:09,690
We just need access to the binary data.

4
00:00:09,690 --> 00:00:16,230
We could use our read profile a request to get the data then we could go ahead and use an image tag

5
00:00:16,260 --> 00:00:20,180
like we did in the last lesson to render the image.

6
00:00:20,220 --> 00:00:24,810
Now the other approach we're going to explore is how we could set up a you are well that's going to

7
00:00:24,810 --> 00:00:26,600
serve that image up.

8
00:00:26,610 --> 00:00:31,410
This is a U.R.L. we could use in our image tags when we're creating the client.

9
00:00:31,410 --> 00:00:36,590
And it's also something we could just visit in the browser to view the profile picture.

10
00:00:36,720 --> 00:00:43,020
So to get this done we'll be setting up a third and final route related to user avatars.

11
00:00:43,020 --> 00:00:48,990
This one will be for fetching an avatar and actually getting the image back down below.

12
00:00:49,020 --> 00:00:56,250
Let's go ahead and set this up using another call on router and this will be a an HDTV get request.

13
00:00:56,250 --> 00:01:02,910
So right here that is router dot get to get the image and we're going to stick with the following You

14
00:01:02,910 --> 00:01:11,430
are Rel structure its forward slash user's forward slash colon idea forward slash avatar.

15
00:01:11,430 --> 00:01:17,730
So this will provide us with a way to get the avatar for a user by their I.D..

16
00:01:17,730 --> 00:01:20,700
Next up we're gonna go ahead and set up our route handler.

17
00:01:20,730 --> 00:01:23,960
So we'll have a request and response set up.

18
00:01:24,120 --> 00:01:27,340
And right here I do plan on using a wait.

19
00:01:27,360 --> 00:01:31,650
So I am going to set this up as an asynchronous request.

20
00:01:31,650 --> 00:01:38,700
Now down below we can focus on getting the avatar for that user and figuring out how exactly we can

21
00:01:38,700 --> 00:01:40,660
serve that file data up.

22
00:01:40,680 --> 00:01:47,480
So when someone visits the U.R.L. they see an image as opposed to seeing just a bunch of binary text.

23
00:01:47,490 --> 00:01:52,920
The first thing we're gonna do inside of here is set up a try catch block as there is a chance we might

24
00:01:52,920 --> 00:01:54,810
not be able to find the image.

25
00:01:54,810 --> 00:01:56,300
The person is looking for.

26
00:01:56,310 --> 00:02:02,160
So right here we'll go ahead and set the try catch statement up and if we can't find things we'll just

27
00:02:02,160 --> 00:02:10,470
send a 4 0 4 back right here response dot status setting and equal to a 4 0 4 and sending it back with

28
00:02:10,470 --> 00:02:13,500
an empty response body now up above.

29
00:02:13,530 --> 00:02:19,740
We want to start the process of looking for the image by the user I.D. So right here let's go ahead

30
00:02:19,740 --> 00:02:22,840
and start by fetching the user concept.

31
00:02:22,890 --> 00:02:32,160
User equals await with the following that is user uppercase U user dot find by I.D. things we've done

32
00:02:32,160 --> 00:02:39,720
plenty of times before and we have the I.D. On request dot paradigms dot I.D. and then down below we

33
00:02:39,720 --> 00:02:46,260
can see if we actually got a user back and if that user actually has an image.

34
00:02:46,290 --> 00:02:53,940
So right here if our condition any code to run now in this case the code down below will be if things

35
00:02:53,940 --> 00:02:59,490
went well and we have an image to send back the code in here is going to handle the case where there

36
00:02:59,490 --> 00:03:04,090
is no user or the user doesn't have an image associated with their account.

37
00:03:04,260 --> 00:03:12,900
So any condition we're going to see if there is no user or there is no user avatar field.

38
00:03:13,020 --> 00:03:19,980
If either of those are true that's a problem for us and we are going to throw a new error that's going

39
00:03:19,980 --> 00:03:25,450
to stop the execution of the try block and immediately jump down to catch.

40
00:03:25,500 --> 00:03:28,170
So a forum for can be sent back.

41
00:03:28,200 --> 00:03:33,660
Now we could choose to include an error message if we wanted to but send on since I'm not taking advantage

42
00:03:33,660 --> 00:03:33,930
of it.

43
00:03:33,930 --> 00:03:40,830
Down below it's completely optional and can be left off now right here we want to run the code we want

44
00:03:40,830 --> 00:03:44,530
to run when things go well and there are two pieces to this.

45
00:03:44,640 --> 00:03:51,630
The first yes is to send back the correct data but we also need to tell the requester what type of data

46
00:03:51,660 --> 00:03:53,760
they're getting back in this case.

47
00:03:53,760 --> 00:04:01,020
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

48
00:04:01,290 --> 00:04:05,980
and right here we get that done by setting a response header.

49
00:04:06,060 --> 00:04:10,890
You can set up Response Headers by using the set method on the response object.

50
00:04:10,920 --> 00:04:18,120
So for us that is r e s dot set and it takes two arguments a key value pair the name of the response

51
00:04:18,120 --> 00:04:22,290
header we're trying to set and the value we're trying to set on it.

52
00:04:22,290 --> 00:04:25,950
Now the name of the one we need to set here is content type.

53
00:04:25,980 --> 00:04:33,000
It is a very popular header specified with almost every single response from any server ever.

54
00:04:33,000 --> 00:04:39,360
Now if we don't specify our own Express is really smart and it can specify it for us which is why we

55
00:04:39,360 --> 00:04:42,630
haven't had to do anything so far with this header.

56
00:04:42,630 --> 00:04:50,520
When we send Jason back express automatically sets the content type header equal to application forward

57
00:04:50,520 --> 00:04:52,140
slash Jason.

58
00:04:52,170 --> 00:04:54,550
Now in this case we're not sending Jason back.

59
00:04:54,570 --> 00:05:01,660
So we don't want to use this header value for content type instead we'll be using image forward slash

60
00:05:01,720 --> 00:05:04,660
J P G perfect.

61
00:05:04,660 --> 00:05:07,680
The last thing to do is to actually send the data back.

62
00:05:07,690 --> 00:05:09,740
So response dot send.

63
00:05:09,850 --> 00:05:12,700
That's gonna be user dot Avatar.

64
00:05:12,700 --> 00:05:19,180
And with this in place we should be able to access the image for a user by their I.D..

65
00:05:19,570 --> 00:05:26,430
This is something we should be able to access in an image tag or by just directly typing it in the browser.

66
00:05:26,440 --> 00:05:33,070
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

67
00:05:33,070 --> 00:05:35,280
user to the clipboard right here.

68
00:05:35,290 --> 00:05:38,280
I have that user I'm going to copy that I.D..

69
00:05:38,890 --> 00:05:44,770
Now this user currently doesn't even have a profile image as we deleted it a bit earlier in the last

70
00:05:44,770 --> 00:05:47,260
lesson over inside of postman.

71
00:05:47,290 --> 00:05:49,380
Let's go ahead and recreate it.

72
00:05:49,420 --> 00:05:56,620
I'll use upload Avatar once again to upload a profile pic I'll send that off and now they should have

73
00:05:56,620 --> 00:05:59,440
a profile pic associated with them.

74
00:05:59,710 --> 00:06:03,980
We can check this by heading over to the browser and messing around with it.

75
00:06:04,000 --> 00:06:11,380
I'm gonna crack open a new tab and we're gonna head to local host on port three thousand forward slash

76
00:06:11,440 --> 00:06:18,460
users forward slash the I.D. we copied to the clipboard forward slash Avatar.

77
00:06:18,460 --> 00:06:21,580
When I do this I would expect to see that picture showing up.

78
00:06:21,580 --> 00:06:23,030
And here it is.

79
00:06:23,050 --> 00:06:29,950
So we've successfully allowed users to upload profile pictures and now we've also given clients a way

80
00:06:30,130 --> 00:06:35,140
to fetch those profile pictures using the following You are our structure.

81
00:06:35,140 --> 00:06:39,760
Now this is a regular image I could right click it and I could save it to my machine.

82
00:06:39,820 --> 00:06:47,110
I could do whatever I wanted with it including using this inside of H2 UML markup to render the image

83
00:06:47,170 --> 00:06:53,560
to my client side application whether it was a web app mobile app or any other app with an internet

84
00:06:53,710 --> 00:06:54,460
connection.

85
00:06:54,460 --> 00:06:58,660
Now let's grab this you are Al and see how we could use it in our HD AML.

86
00:06:58,670 --> 00:07:01,210
So I'm going to copy this to the clipboard.

87
00:07:01,210 --> 00:07:07,150
I'm gonna head back over to J S bean and we're simply going to delete this image tag altogether.

88
00:07:07,180 --> 00:07:12,960
I'll highlight the entire line trashing it and we'll recreate the image tag from scratch.

89
00:07:12,960 --> 00:07:15,440
That'll be an image I AMG.

90
00:07:15,730 --> 00:07:21,250
Then we set up the source attribute this time around we're not doing anything complex so we don't have

91
00:07:21,250 --> 00:07:28,660
to say that it's data of a specific type in this encoding We simply provide the U.R.L. when we do that

92
00:07:28,660 --> 00:07:31,060
the browser automatically fetches the image.

93
00:07:31,090 --> 00:07:35,530
And down below we can see it just like we had in the past.

94
00:07:35,560 --> 00:07:40,750
So now we have a way for users to be able to access those profile pictures.

95
00:07:40,750 --> 00:07:46,100
And that's where we're going to stop for this one in the next and final lesson for this section.

96
00:07:46,150 --> 00:07:52,180
You're going to learn about how you can automatically crop and format images to fit your specific needs.

97
00:07:52,180 --> 00:07:53,720
I'm excited to get to that.

98
00:07:53,770 --> 00:07:56,410
So let's jump right in to the next lesson.