1
00:00:00,180 --> 00:00:05,820
In this video you're going to learn how to customize the errors that get sent back when the file upload

2
00:00:05,850 --> 00:00:06,740
fails.

3
00:00:06,780 --> 00:00:12,360
Whether it's because the file is not of the right type or whether it's because it's too large and doesn't

4
00:00:12,360 --> 00:00:15,720
meet the file size limitation we've set.

5
00:00:15,750 --> 00:00:22,230
Either way we can go ahead and send back a Jason error message instead of trying to render this HDL

6
00:00:22,230 --> 00:00:25,490
document which is what we're seeing right now.

7
00:00:25,590 --> 00:00:31,740
The first thing we're gonna do is take the multi-year middleware out of the situation altogether.

8
00:00:31,740 --> 00:00:37,260
It'll be easier to explore this without figuring out what's Malta and what's Express.

9
00:00:37,350 --> 00:00:39,140
So all I'm going to do is remove it.

10
00:00:39,180 --> 00:00:43,560
No longer will we use that middleware that will add it back in shortly.

11
00:00:43,560 --> 00:00:47,900
Next up we're going to create some middleware like we did earlier in the class.

12
00:00:47,940 --> 00:00:55,530
I'm just going to define a function right here error middleware will be a function we'll get request

13
00:00:55,770 --> 00:00:59,910
response and next which we know we get with our middleware functions.

14
00:01:00,060 --> 00:01:04,340
And all I'm going to do every single time is throw a new error.

15
00:01:04,380 --> 00:01:13,970
So right here throw new error with the following message from my middleware and this is what we're going

16
00:01:13,970 --> 00:01:17,840
to register as the middleware to use for post upload.

17
00:01:17,840 --> 00:01:22,870
So right here I will reference that function perfect.

18
00:01:22,920 --> 00:01:29,160
Now with this in place we can go ahead and run this route from postmen and see what we get back I'm

19
00:01:29,160 --> 00:01:35,820
gonna head over to post man switch over to post forward slash upload I'll fire that off and what do

20
00:01:35,820 --> 00:01:38,970
I get down below I get some HDMI out.

21
00:01:39,000 --> 00:01:41,460
It looks exactly like what I had before.

22
00:01:41,460 --> 00:01:45,830
The only difference is that the error is now the one that we've provided.

23
00:01:45,840 --> 00:01:51,960
So here we've completely taken Mulder out of the equation but we're still seeing a very similar response

24
00:01:51,990 --> 00:01:55,140
where we're getting an HD AML document back.

25
00:01:55,140 --> 00:02:00,750
We can go ahead and address that using our own little middleware example and the same solution will

26
00:02:00,750 --> 00:02:03,810
work once we bring Mulder into the mix.

27
00:02:03,810 --> 00:02:09,030
Now the problem here is that the middleware is throwing an error and we haven't registered any code

28
00:02:09,030 --> 00:02:09,630
to run.

29
00:02:09,660 --> 00:02:16,690
When that happens we can go ahead and do that by providing a another callback function down below.

30
00:02:16,740 --> 00:02:22,800
So after the root handler which only runs when things go well we'll provide a another function with

31
00:02:22,800 --> 00:02:24,810
the following arguments.

32
00:02:24,810 --> 00:02:27,780
The first is the error that we're catching.

33
00:02:27,780 --> 00:02:33,720
Then we have the request and response arguments and then we have next which we could optionally use

34
00:02:33,750 --> 00:02:35,190
but which we won't.

35
00:02:35,190 --> 00:02:40,980
It's important that we provide all four of these so express knows that this function is designed to

36
00:02:40,980 --> 00:02:47,610
handle errors now down below we can actually choose what we want to send back and we can go ahead and

37
00:02:47,610 --> 00:02:49,290
customize it to fit our need.

38
00:02:49,290 --> 00:02:55,930
So for example I could use the following response dot status to set up a four hundred.

39
00:02:56,130 --> 00:02:59,410
And then I could use send to send that back.

40
00:02:59,460 --> 00:03:05,580
Let's go ahead and save the program with our one function added onto the end of the post call and we're

41
00:03:05,580 --> 00:03:08,830
gonna run at the exact same request from postmen.

42
00:03:08,880 --> 00:03:09,710
I'll send that off.

43
00:03:10,190 --> 00:03:11,830
And what do I get down below.

44
00:03:11,850 --> 00:03:19,130
I have a four hundred status code we set up with an empty body which is exactly what I specified.

45
00:03:19,140 --> 00:03:24,780
Now from here we can take things even further and actually send the correct error message back.

46
00:03:25,050 --> 00:03:31,200
So I could send back some Jason with the error property where the value comes from the message property

47
00:03:31,230 --> 00:03:33,270
on the error itself.

48
00:03:33,270 --> 00:03:39,690
This would allow the client to know why things failed and if I go ahead and rerun the request with this

49
00:03:39,690 --> 00:03:43,330
code saved I would expect to see my message showing up.

50
00:03:43,570 --> 00:03:48,480
So right here I have from my middleware showing up which is great.

51
00:03:48,480 --> 00:03:56,130
Now the client is getting a useful error message back in Jason as opposed to that H2 UML page with this

52
00:03:56,130 --> 00:03:56,940
in place.

53
00:03:56,970 --> 00:04:03,380
All we need to do is swap out the error middleware with the middleware we were using before so right

54
00:04:03,380 --> 00:04:04,100
here.

55
00:04:04,100 --> 00:04:11,330
I'm gonna remove the function and I will use upload dot single once again right here I am uploading

56
00:04:11,330 --> 00:04:14,240
what I believe I called upload.

57
00:04:14,630 --> 00:04:17,260
Let's go ahead and double check that over in the request.

58
00:04:17,270 --> 00:04:19,090
Yes that is correct.

59
00:04:19,130 --> 00:04:23,500
And with that in place we no longer have a need for that middleware function.

60
00:04:23,510 --> 00:04:31,220
We define now what we have is an upload endpoint that accepts images but also correctly handles errors

61
00:04:31,250 --> 00:04:32,330
when things go wrong.

62
00:04:32,720 --> 00:04:36,710
So let's go ahead and make something go wrong over here.

63
00:04:36,710 --> 00:04:39,560
We are currently uploading sample dark file.

64
00:04:39,560 --> 00:04:42,660
This should work since it is a document.

65
00:04:42,740 --> 00:04:46,730
I send it off and like we had before I get my two hundred.

66
00:04:46,760 --> 00:04:50,200
Now let's go ahead and swap that out for something else.

67
00:04:50,270 --> 00:04:56,460
I'll try to upload an image instead of a word document right here I'm uploading profile pic dot JPEG

68
00:04:57,230 --> 00:05:05,570
I send that off and what do I get I get my error message as a nice clean Jason response body error please

69
00:05:05,600 --> 00:05:13,250
upload a word document it could not be clearer so all we really did was we added a another function

70
00:05:13,340 --> 00:05:19,940
onto the end of the route handle or call in this case app dot post but the same strategy would work

71
00:05:19,940 --> 00:05:23,270
for Patch Delete Get or anything else.

72
00:05:23,270 --> 00:05:30,350
This function needs to have this call signature this set of arguments that it expects that's what let's

73
00:05:30,350 --> 00:05:30,860
express.

74
00:05:30,860 --> 00:05:38,150
No that this is the function set up to handle any uncut errors in this case any errors that have occurred

75
00:05:38,390 --> 00:05:45,310
because melter through an error when it got a bad upload so all we did is add this function.

76
00:05:45,320 --> 00:05:50,310
Now it's your challenge to do the exact same thing for the other route we've been working on.

77
00:05:50,330 --> 00:05:55,760
I'm gonna head over to the user router where I'll paste in some challenge comments right here.

78
00:05:55,830 --> 00:06:01,340
What I'd like you to do is clean up the error handling you're going to set up the error handler function

79
00:06:01,340 --> 00:06:07,760
for this particular endpoint when that occurs you will send back a four hundred with the error message

80
00:06:08,000 --> 00:06:14,180
and finally you'll test your work try to upload something whether it's too big or not an image that's

81
00:06:14,180 --> 00:06:19,620
going to trigger an error and make sure you actually get the Jason response in post man.

82
00:06:19,700 --> 00:06:21,260
Take some time to knock that out.

83
00:06:21,260 --> 00:06:24,590
Test your work and when you're done come back and click play

84
00:06:28,580 --> 00:06:29,360
how'd that go.

85
00:06:29,360 --> 00:06:32,890
Let's go ahead and kick things off together by setting up that function.

86
00:06:32,900 --> 00:06:37,600
This is going to come at the very end and it has to have the correct call signature.

87
00:06:37,610 --> 00:06:45,620
Remember that is an error request response and next followed by the rest of the arrow function definition

88
00:06:46,250 --> 00:06:47,190
down below.

89
00:06:47,330 --> 00:06:52,580
We'll use response dot status to send back a four hundred letting them know that there is something

90
00:06:52,580 --> 00:06:54,710
wrong with the data they've provided.

91
00:06:54,710 --> 00:06:58,040
Either the file is too big or it's not an image.

92
00:06:58,040 --> 00:07:04,400
And will you send to send back the error message on our object which will be passed to Jason.

93
00:07:04,400 --> 00:07:12,530
We are going to set up error with the value coming from the message property on the actual error object.

94
00:07:12,530 --> 00:07:17,900
Now that we have this in place things should be working from postman I can remove the challenge comments

95
00:07:17,930 --> 00:07:21,410
since we're moving on to Step 3 where we test our work.

96
00:07:21,530 --> 00:07:23,700
I will save the user router.

97
00:07:23,960 --> 00:07:25,640
Head over to man.

98
00:07:25,700 --> 00:07:30,610
Switch over to the upload Avatar request and test things out now.

99
00:07:30,620 --> 00:07:35,860
Right here I'm trying to upload a PD app that failed before and it should still fail.

100
00:07:35,870 --> 00:07:41,990
Just with a different response body right here please upload an image which is fantastic.

101
00:07:41,990 --> 00:07:44,580
Next up let's use a valid upload.

102
00:07:44,600 --> 00:07:48,880
So right here I can upload that robot profile picture.

103
00:07:48,980 --> 00:07:50,540
I'm going to send that off.

104
00:07:50,540 --> 00:07:52,460
This should work right here.

105
00:07:52,460 --> 00:07:53,450
It does.

106
00:07:53,450 --> 00:08:00,290
It does match the file extension and it's not larger than a megabyte and that upload is accepted now

107
00:08:00,290 --> 00:08:01,770
that we have this in place.

108
00:08:01,820 --> 00:08:08,420
The next step in the process is to figure out how we can add authentication and actually associate this

109
00:08:08,480 --> 00:08:11,050
image with the user who uploaded it.

110
00:08:11,380 --> 00:08:14,340
And that's what we're going to focus on in the next lesson.

111
00:08:14,360 --> 00:08:16,490
So let's go ahead and jump into that.