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

2
00:00:00,470 --> 00:00:03,150
Like I mentioned quite a few times in the previous videos.

3
00:00:03,170 --> 00:00:08,980
By default, we won't have access to form data in our express application.

4
00:00:08,990 --> 00:00:11,930
In order to fix that, we need to install another package.

5
00:00:11,930 --> 00:00:17,300
And the package name is Multer and I'll right away set it up as a middleware.

6
00:00:17,330 --> 00:00:24,650
Now, please keep in mind that of course this configuration you can set up directly in a server, basically

7
00:00:24,650 --> 00:00:25,580
the server.

8
00:00:25,580 --> 00:00:33,920
JS But in my case I will set it up as separate middleware since we'll only use it in one route anyway.

9
00:00:34,370 --> 00:00:39,950
And if you want to install it for your own projects, just go with NPM install and you're looking for

10
00:00:39,950 --> 00:00:40,760
Multer.

11
00:00:40,760 --> 00:00:44,060
So let's navigate right now to middleware folder.

12
00:00:44,060 --> 00:00:49,220
In there we want to create a new file and I'm going to call this Multer middleware.

13
00:00:51,710 --> 00:00:54,500
First, we'll start by importing the package.

14
00:00:54,860 --> 00:00:56,690
So multer from Multer.

15
00:00:56,900 --> 00:01:01,490
Then we will create a storage and we have a few options.

16
00:01:01,490 --> 00:01:05,090
We can go with memory storage or we can go with disk storage.

17
00:01:05,090 --> 00:01:11,890
So we'll go with the second one because we will need that file in order to send it to Cloudinary.

18
00:01:11,900 --> 00:01:14,420
So we're going to go here with storage.

19
00:01:14,510 --> 00:01:21,310
Essentially, we're just setting up the variable then multer and it has the method of disk storage.

20
00:01:21,320 --> 00:01:28,010
Now in this disk storage, we provide an object and we have few available properties.

21
00:01:28,010 --> 00:01:33,350
First one is going to be destination and we set both of them equal to functions.

22
00:01:33,350 --> 00:01:35,570
And the second one will be a file name.

23
00:01:35,570 --> 00:01:37,760
So let's start over here with destination.

24
00:01:38,410 --> 00:01:40,960
So we'll set it equal to a function.

25
00:01:40,960 --> 00:01:47,700
Like I said, in there we have access to rec file and they use this callback approach.

26
00:01:47,710 --> 00:01:54,190
So just bear with me as far as the functionality we want to go with callback, then we'll provide Null,

27
00:01:54,190 --> 00:01:56,680
which stands essentially if there is an error.

28
00:01:56,680 --> 00:02:00,520
And then the actual location, the destination.

29
00:02:00,520 --> 00:02:06,730
And in my case I'm going to go to public forward slash uploads since we just created those two folders

30
00:02:06,730 --> 00:02:14,110
and the second one is technically optional since we'll right away send it to cloudinary anyway.

31
00:02:14,110 --> 00:02:17,620
But in my case I want to keep the original file name.

32
00:02:18,340 --> 00:02:19,720
How is that going to look like?

33
00:02:19,720 --> 00:02:25,120
We go first with the file name property again, it's the same deal.

34
00:02:25,510 --> 00:02:26,200
Pretty much.

35
00:02:26,200 --> 00:02:27,820
We have the same syntax over here.

36
00:02:27,820 --> 00:02:36,820
So rec file and then the callback only in this case, instead of the destination, we go with file name

37
00:02:36,820 --> 00:02:40,070
and I'm going to construct a file name right above.

38
00:02:40,070 --> 00:02:44,300
So right above the callback I'm going to go with const file name.

39
00:02:44,300 --> 00:02:45,650
So that's my variable.

40
00:02:45,650 --> 00:02:52,250
And essentially we look for file, which is the second parameter and we have access to original name.

41
00:02:52,250 --> 00:02:59,600
So whatever is the original file name is going to be used when we save this file here with a multer.

42
00:02:59,600 --> 00:03:05,390
And then we just want to provide the file name variable and after that we want to come up with another

43
00:03:05,390 --> 00:03:08,660
variable and we'll set it equal to multer.

44
00:03:08,660 --> 00:03:10,250
So we want to invoke it.

45
00:03:10,310 --> 00:03:14,690
And in this object we need to provide the storage property.

46
00:03:14,690 --> 00:03:19,400
And since I already have the variable, I'm just going to go storage equals to storage.

47
00:03:19,400 --> 00:03:25,490
And at the very end we want to go with export default and let's export the upload.

48
00:03:25,550 --> 00:03:28,190
And in which route do we want to use?

49
00:03:28,220 --> 00:03:31,760
Well, remember it's the update user one Correct.

50
00:03:31,760 --> 00:03:38,660
So now let's navigate to the routes one user router and essentially.

51
00:03:39,330 --> 00:03:40,170
Somewhere here.

52
00:03:40,170 --> 00:03:41,130
Let's import it.

53
00:03:41,820 --> 00:03:45,330
So we're going to go here with import upload.

54
00:03:45,360 --> 00:03:47,790
It's a default one, so it doesn't really matter.

55
00:03:47,790 --> 00:03:49,950
And then let's look for this one.

56
00:03:49,950 --> 00:03:54,330
So we want to do it before validate update user.

57
00:03:54,450 --> 00:03:59,130
So let's invoke and we want to provide here the method.

58
00:03:59,130 --> 00:04:04,740
So either we can upload multiple or we can upload single.

59
00:04:04,740 --> 00:04:10,560
So in our case we only want to upload single file and therefore I'm going to go with upload single.

60
00:04:10,560 --> 00:04:15,180
And this is where we want to point what is the name in the form data.

61
00:04:15,180 --> 00:04:18,089
And remember we set it up as Avatar, correct.

62
00:04:18,089 --> 00:04:26,700
So let me correctly provide here Avatar and what you'll notice once you navigate to the controllers

63
00:04:26,700 --> 00:04:34,050
and user controller in there, we'll have access to erect file and you'll also see how we nicely right

64
00:04:34,050 --> 00:04:35,940
away add this file to the public.

65
00:04:35,940 --> 00:04:42,730
So let me for now, just log over here, rec dot file, and then remember, it's still goes through

66
00:04:42,730 --> 00:04:44,920
update user validation.

67
00:04:44,920 --> 00:04:45,520
Correct.

68
00:04:45,520 --> 00:04:52,660
And what's really awesome motor just takes everything that we have form data and transform it into a

69
00:04:52,660 --> 00:04:53,650
req.body.

70
00:04:54,010 --> 00:05:00,460
So what I'm trying to say is that once we have this logic in place, actually everything is going to

71
00:05:00,460 --> 00:05:01,180
be correct.

72
00:05:01,210 --> 00:05:06,520
We won't have those error messages as far as the rest of the values are concerned.

73
00:05:06,520 --> 00:05:08,290
So let me try it out.

74
00:05:08,440 --> 00:05:12,730
Hopefully I won't have to restart the server, so let me send it over here again.

75
00:05:12,730 --> 00:05:15,100
You can pick any image you want.

76
00:05:15,100 --> 00:05:16,420
I'm just going to change over here.

77
00:05:16,420 --> 00:05:16,750
The name.

78
00:05:16,750 --> 00:05:17,950
I'm going to go with Peter.

79
00:05:18,920 --> 00:05:21,680
Then let's look for Avatar one.

80
00:05:21,680 --> 00:05:24,110
Let's send it and check it out.

81
00:05:24,290 --> 00:05:26,840
So profile updated successfully.

82
00:05:26,840 --> 00:05:35,150
So our request was successful and I can clearly see that over here in my logout button now also if I

83
00:05:35,180 --> 00:05:36,440
navigate back.

84
00:05:37,070 --> 00:05:38,500
This is going to be the file.

85
00:05:38,510 --> 00:05:42,700
So this is the file that Malter just uploaded.

86
00:05:42,840 --> 00:05:46,500
Notice we have the path, we have the size and all that cool stuff.

87
00:05:46,520 --> 00:05:52,760
And also, if we take a look at the public one, of course in the uploads, I'll see my avatar.

88
00:05:52,940 --> 00:05:57,620
And with this in place now, we can move on to the next step.