1
00:00:00,050 --> 00:00:00,440
All right.

2
00:00:00,440 --> 00:00:07,950
And before we set up an action in the profile page, let's recall the update user request.

3
00:00:07,970 --> 00:00:15,230
So the URL is forward slash users, forward slash update user, and the method is patch.

4
00:00:15,410 --> 00:00:19,280
And essentially, this is what we want to send to the server.

5
00:00:19,310 --> 00:00:23,660
Now, keep in mind one thing since we'll be sending form data.

6
00:00:24,500 --> 00:00:27,800
When we send from the front end, it's not going to work.

7
00:00:27,800 --> 00:00:34,820
So we still need to add few additional things on the server just so we can process this data.

8
00:00:34,820 --> 00:00:36,560
So don't be surprised.

9
00:00:36,590 --> 00:00:40,310
Once we set up everything in the action, it's not going to work.

10
00:00:40,310 --> 00:00:45,080
So yes, the main idea is going to stay the same as far as this request.

11
00:00:45,110 --> 00:00:52,670
But since we'll be sending form data, we need to install a specific package which will allow us to

12
00:00:52,670 --> 00:00:53,750
nicely.

13
00:00:54,540 --> 00:00:56,570
Access all of the data.

14
00:00:56,580 --> 00:00:58,680
So let's navigate back to the Readme.

15
00:00:58,710 --> 00:01:02,730
As far as the action in this case, we only want to grab the form data.

16
00:01:02,760 --> 00:01:05,010
So again, we're not looking for Json.

17
00:01:05,190 --> 00:01:12,930
I will set up a check on the front end to make sure that we're not passing in the file that's bigger

18
00:01:12,930 --> 00:01:16,200
than, again, 0.5MB.

19
00:01:16,200 --> 00:01:18,990
And if that's the case, I'll just say toast and return.

20
00:01:19,560 --> 00:01:22,110
And right after that we're going to have try and catch.

21
00:01:22,140 --> 00:01:24,030
We'll go with custom fetch Patch.

22
00:01:24,150 --> 00:01:26,460
We're looking for users and then update user.

23
00:01:26,610 --> 00:01:29,300
Like I said, we're passing in the form data.

24
00:01:29,310 --> 00:01:35,790
If we're successful, we'll just say profile updated successfully and if there's an error, we'll display

25
00:01:35,790 --> 00:01:36,450
the error.

26
00:01:36,480 --> 00:01:38,790
Now at the very end we'll return null.

27
00:01:38,790 --> 00:01:43,080
And if you're wondering, well, how are we going to update the inputs in the profile page, Well,

28
00:01:43,080 --> 00:01:49,050
remember, every time we make a request, right after that, we make the current user request where

29
00:01:49,050 --> 00:01:53,280
we get info on that user and in there we'll have the new values.

30
00:01:53,280 --> 00:01:59,050
And since we already have the default values set up in the return, that's how we will display the latest

31
00:01:59,050 --> 00:01:59,740
value.

32
00:01:59,770 --> 00:02:01,540
So let's get cracking.

33
00:02:01,540 --> 00:02:05,350
We want to navigate to again profile.

34
00:02:06,530 --> 00:02:08,630
Let's set up the action right above.

35
00:02:09,380 --> 00:02:13,160
So we're going to go here with export const action.

36
00:02:13,870 --> 00:02:15,570
It's going to be a sink.

37
00:02:15,580 --> 00:02:17,410
So that doesn't change.

38
00:02:18,530 --> 00:02:24,410
And before I set up the function body, let me right away grab it in the app.

39
00:02:26,580 --> 00:02:27,450
Let me go up.

40
00:02:28,100 --> 00:02:31,520
This is going to be a profile action.

41
00:02:34,730 --> 00:02:36,890
And I also want to rename it over here.

42
00:02:39,300 --> 00:02:41,820
And then as far as the pages.

43
00:02:43,290 --> 00:02:45,120
We're looking for a profile one.

44
00:02:46,430 --> 00:02:47,420
Let's scroll down.

45
00:02:48,790 --> 00:02:50,890
Let's look for the profile page.

46
00:02:50,920 --> 00:02:54,820
We have action and that one is equal to our.

47
00:02:55,570 --> 00:02:56,950
Profile action.

48
00:02:57,960 --> 00:02:58,740
Let's save it.

49
00:02:59,340 --> 00:03:01,050
And back in a profile.

50
00:03:01,820 --> 00:03:03,680
Let's start working on the functionality.

51
00:03:03,710 --> 00:03:09,530
For starters, we want to access the request since that's where the form data is located.

52
00:03:10,410 --> 00:03:12,990
And let's set it equal to a variable.

53
00:03:12,990 --> 00:03:17,160
So formdata is equal to await then request.

54
00:03:17,430 --> 00:03:19,770
And then we want to invoke the form data.

55
00:03:19,920 --> 00:03:29,190
Now the form data interface has this method of get where we can provide which input value we want to

56
00:03:29,190 --> 00:03:30,000
access.

57
00:03:30,150 --> 00:03:32,000
And in our case that is Avatar.

58
00:03:32,010 --> 00:03:37,860
So essentially I'm going to go here with file and I'll set it equal to form.

59
00:03:38,650 --> 00:03:39,840
Data get.

60
00:03:39,850 --> 00:03:46,690
So that's a special method that we get on the interface and we just need to provide the correct name

61
00:03:46,690 --> 00:03:47,890
of the input.

62
00:03:47,920 --> 00:03:49,510
Now, why do we do this check?

63
00:03:49,510 --> 00:03:53,380
Well, because keep in mind, we don't always have to provide the image.

64
00:03:53,970 --> 00:03:59,820
If let's say I just want to change the name, I don't have to select a file over here.

65
00:03:59,820 --> 00:04:02,880
So effectively I just want to check whether the file is present.

66
00:04:02,880 --> 00:04:06,600
And if that's the case, well, then we'll check for the size as well.

67
00:04:06,600 --> 00:04:13,020
And as far as the condition I'm going to go with, if file exists, then check for the size as well.

68
00:04:13,020 --> 00:04:14,880
So file dot size.

69
00:04:15,810 --> 00:04:22,010
And we want to make sure that it's bigger than 0.5MB.

70
00:04:22,019 --> 00:04:25,710
And in that case, we need to provide here five zeros, I believe.

71
00:04:27,190 --> 00:04:30,250
And if it's bigger, then of course, let's run toast.

72
00:04:30,910 --> 00:04:36,310
Then let's provide some kind of message image size to large.

73
00:04:36,460 --> 00:04:39,110
And then also let's return null.

74
00:04:39,130 --> 00:04:42,550
Remember, we always, always want to return something from the action.

75
00:04:42,550 --> 00:04:44,890
And this condition is no exception.

76
00:04:44,890 --> 00:04:47,350
So if it's too big, then we return null.

77
00:04:47,380 --> 00:04:50,950
Now, if it's not too big, then we want to make the request.

78
00:04:51,720 --> 00:04:56,700
Let's go with await then custom fetch dot patch.

79
00:04:57,450 --> 00:05:02,790
And then we want to go with users, then forward slash and then update.

80
00:05:04,060 --> 00:05:05,740
iPhone User root.

81
00:05:06,800 --> 00:05:08,630
And we want to go with form data.

82
00:05:09,650 --> 00:05:15,620
Then if we're successful, we want to go here with toast and success and we want to provide some kind

83
00:05:15,620 --> 00:05:16,070
of message.

84
00:05:16,080 --> 00:05:21,290
So in my case, I'm going to go with profile updated successfully.

85
00:05:21,500 --> 00:05:24,410
And then as far as the catch, we want to go with error.

86
00:05:24,500 --> 00:05:25,480
And you know what?

87
00:05:25,490 --> 00:05:29,360
Again, this is going to be the case where I will speed this up a little bit.

88
00:05:29,720 --> 00:05:35,660
I'm just going to look for edit, for example, and grab this over here and we don't need to return

89
00:05:35,660 --> 00:05:39,620
an error because regardless whether we're successful or not.

90
00:05:40,260 --> 00:05:43,140
I just want to turn now and now let's navigate back to the browser.

91
00:05:43,140 --> 00:05:48,990
Like I said, yes, the request is going to fail, but I still want to showcase a few things.

92
00:05:48,990 --> 00:05:52,050
So for starters, you can pick the image, you can skip it.

93
00:05:52,050 --> 00:05:54,420
That part is totally irrelevant.

94
00:05:54,720 --> 00:05:57,720
You can change the name, for example, to peer.

95
00:05:57,840 --> 00:06:00,750
Now let's make a request and check it out.

96
00:06:00,960 --> 00:06:02,250
We'll get 400.

97
00:06:02,400 --> 00:06:09,120
Like I said, since we're not able to process the values in the form data, essentially the server sends

98
00:06:09,120 --> 00:06:09,390
back.

99
00:06:09,390 --> 00:06:11,580
Hey, listen, there is no name.

100
00:06:11,580 --> 00:06:16,950
There is no email because remember, we already set up the validation layer, correct.

101
00:06:16,950 --> 00:06:19,980
So for starters, let's take a look at the request.

102
00:06:20,070 --> 00:06:23,010
So this is the URL, It's a patch method.

103
00:06:23,040 --> 00:06:25,110
Then let's keep on scrolling.

104
00:06:25,110 --> 00:06:28,170
And somewhere over here, notice this content type.

105
00:06:28,170 --> 00:06:31,470
In this case it's multipart form data.

106
00:06:31,470 --> 00:06:33,300
So that's what we're sending.

107
00:06:33,390 --> 00:06:40,270
And essentially, if we take a look at the payload notice, the avatar is binary and essentially that's

108
00:06:40,270 --> 00:06:42,130
why we need to do these acrobatics.

109
00:06:42,130 --> 00:06:50,380
Now, if I'm going to go to, for example, job and again, let's look for front end and then Apple.

110
00:06:51,210 --> 00:06:53,550
Of course, you'll notice this payload over here.

111
00:06:53,550 --> 00:06:57,360
So again, this is the difference when we're sending a file.

112
00:06:57,360 --> 00:07:05,460
And up next, we want to set up the functionality on the server so we can process this data as well.