1
00:00:00,230 --> 00:00:05,750
Okay, so now we can create and edit products, but we can only edit the text fields.

2
00:00:05,750 --> 00:00:09,560
We want to be able to upload the image as well.

3
00:00:09,560 --> 00:00:15,350
So we're going to use a package called Malter for this, which is pretty popular.

4
00:00:15,350 --> 00:00:18,200
You can see it has 4 million weekly downloads.

5
00:00:18,200 --> 00:00:26,150
It's basically the go to for NodeJS and uploading images and you can use different sources.

6
00:00:26,150 --> 00:00:32,689
For instance, if you wanted to use like Amazon's buckets, S3 buckets, you could do that, but we're

7
00:00:32,689 --> 00:00:35,300
just going to upload directly to the server.

8
00:00:35,420 --> 00:00:35,930
Okay?

9
00:00:35,930 --> 00:00:37,910
So we need to install it.

10
00:00:37,910 --> 00:00:43,520
And then basically we need to just add some middleware and hook it up.

11
00:00:43,520 --> 00:00:47,540
And everything we're doing is pretty much in this documentation.

12
00:00:47,540 --> 00:00:53,270
I just I don't really like how the docs are set up here, at least on the GitHub page and the NPM page

13
00:00:53,270 --> 00:00:54,980
because it's all so spread out.

14
00:00:54,980 --> 00:00:58,250
So it's kind of hard to figure out exactly what to do.

15
00:00:58,250 --> 00:01:00,690
But that's what I'm here for.

16
00:01:00,690 --> 00:01:03,000
So we're going to install this now.

17
00:01:03,030 --> 00:01:08,370
Make sure you install Multer on your back end, meaning your in your root, not in the front end.

18
00:01:08,370 --> 00:01:15,360
So I'm going to stop the server and I'm in the root directory right now and we're going to NPM install

19
00:01:15,360 --> 00:01:16,350
malter.

20
00:01:17,810 --> 00:01:20,190
Again, make sure you're not in your front end.

21
00:01:20,210 --> 00:01:23,180
So then we can just run the server again.

22
00:01:24,810 --> 00:01:27,330
And we're going to go into our back end.

23
00:01:27,360 --> 00:01:30,800
First thing we're going to do is create a new route.

24
00:01:30,810 --> 00:01:34,560
So we're actually going to create a new route file.

25
00:01:34,890 --> 00:01:40,290
So in routes, let's create a new file here called Upload.

26
00:01:41,370 --> 00:01:42,510
Routes.

27
00:01:43,670 --> 00:01:46,400
Uh, routes dot JS.

28
00:01:47,030 --> 00:01:47,480
Okay.

29
00:01:47,480 --> 00:01:51,680
And then we're going to bring in a couple things here.

30
00:01:51,680 --> 00:01:54,710
So I want to bring in the path module so we can use that.

31
00:01:54,710 --> 00:01:58,790
So install path import path from path.

32
00:01:59,220 --> 00:02:02,730
And then I'm also going to bring in Express because we need the router.

33
00:02:02,730 --> 00:02:08,039
So let's say we'll import Malta first and then create the router.

34
00:02:08,039 --> 00:02:09,270
So const.

35
00:02:10,240 --> 00:02:13,690
Router equals express router.

36
00:02:13,690 --> 00:02:19,600
And then before I forget, I just want to export as default router because sometimes I forget to do

37
00:02:19,600 --> 00:02:20,260
that.

38
00:02:20,290 --> 00:02:27,940
Now, before we even create our routes, we need to describe where we want our image to go, which storage

39
00:02:27,940 --> 00:02:28,710
we want to use.

40
00:02:28,710 --> 00:02:33,190
So we could use Amazon buckets or disk storage, which is what I want.

41
00:02:33,220 --> 00:02:40,720
So let's say const storage and set that to multer dot disk storage because we want it to just be on

42
00:02:40,720 --> 00:02:43,060
the disk on the server, right?

43
00:02:43,060 --> 00:02:46,330
And then this takes in an object with a couple functions.

44
00:02:46,330 --> 00:02:48,400
First is going to be destination.

45
00:02:48,400 --> 00:02:58,690
So this will describe where we want to save this and notice that we pass in request file and CB So CB

46
00:02:58,690 --> 00:03:02,980
is the callback that we want to call within here and the null.

47
00:03:03,010 --> 00:03:08,890
The first argument of null pertains to an error which we don't have an error, so we're going to put

48
00:03:08,920 --> 00:03:09,920
Null for that.

49
00:03:09,920 --> 00:03:16,100
And then the second is where we actually want our uploads to go, which is going to be in a folder called

50
00:03:16,100 --> 00:03:18,260
uploads and this is in the route.

51
00:03:18,260 --> 00:03:26,060
So what you want to do is in the route here, create a folder called uploads, don't put it in the back

52
00:03:26,060 --> 00:03:29,360
end folder or front end folder, just put it right in the route.

53
00:03:29,690 --> 00:03:30,050
Okay.

54
00:03:30,050 --> 00:03:34,400
And any images that get uploaded through our app will go into here.

55
00:03:34,400 --> 00:03:40,550
Now we're going to put a comma and then we want a file name function because we need to describe how

56
00:03:40,550 --> 00:03:44,300
we want our files to be, our file names to be formatted.

57
00:03:44,300 --> 00:03:49,400
So we're going to go ahead and call the callback pass in Null for the error.

58
00:03:49,400 --> 00:03:54,470
And then this is how we're going to create our file names.

59
00:03:54,470 --> 00:03:58,100
So it's going to be the field name, which can be anything really.

60
00:03:58,100 --> 00:04:04,640
We're just going to use image and then Dash and then whatever the timestamp is with date dot now and

61
00:04:04,640 --> 00:04:10,940
then we'll use whatever extension the file has, which could be Jpeg, PNG.

62
00:04:10,940 --> 00:04:16,760
We're actually going to have some validation so that we can only have image files, but it will use

63
00:04:16,760 --> 00:04:17,779
the extension name.

64
00:04:17,779 --> 00:04:21,890
That's what this ext name does of the original file.

65
00:04:22,640 --> 00:04:24,020
All right now.

66
00:04:24,600 --> 00:04:28,500
That should do it as far as this storage variable goes.

67
00:04:28,530 --> 00:04:35,070
Now we want to create a function to check the file type because again, we don't want people to be able

68
00:04:35,070 --> 00:04:39,910
to upload like PDFs or X files or anything like that.

69
00:04:39,930 --> 00:04:42,330
So for now, let's.

70
00:04:43,870 --> 00:04:45,470
I think this is what we want.

71
00:04:45,470 --> 00:04:48,860
So we're going to have a variable called file types.

72
00:04:48,890 --> 00:04:58,190
This is just a regular expression of what we want to allow, and I want it to allow JPEGs, Jpeg and

73
00:04:58,190 --> 00:05:07,820
PNG, and then we'll have our extension name, set that to file types, which is this variable dot test.

74
00:05:07,820 --> 00:05:14,360
And then we're going to pass in the extension of the original file name and make it all lowercase.

75
00:05:14,360 --> 00:05:19,280
And then for the mime type, we're going to pass in just file dot mime type.

76
00:05:19,280 --> 00:05:26,300
All these properties are available on this this file object, and then we're just going to check the

77
00:05:26,300 --> 00:05:34,670
extension name and the mime type and test is just to do just that test to see if it's going to match

78
00:05:34,700 --> 00:05:36,500
our regular expression.

79
00:05:37,820 --> 00:05:44,400
And then if it does, we're going to return the callback with true as the second argument else, we're

80
00:05:44,400 --> 00:05:46,560
going to return the callback with an error.

81
00:05:46,560 --> 00:05:49,260
Because remember, the first argument is your error.

82
00:05:49,260 --> 00:05:53,460
So here we actually want an error and we're going to say image is only.

83
00:05:54,540 --> 00:05:54,990
All right.

84
00:05:55,020 --> 00:05:59,370
Now to do the actual upload, let's.

85
00:06:00,030 --> 00:06:06,510
Come down here and we're going to say const upload equals malter.

86
00:06:07,920 --> 00:06:12,150
And in this object we're going to pass in our storage variable.

87
00:06:12,800 --> 00:06:15,020
Now we can create the actual route.

88
00:06:15,020 --> 00:06:18,650
So let's say route router dot post.

89
00:06:19,630 --> 00:06:21,220
And do that.

90
00:06:21,220 --> 00:06:28,210
So this middle part here, this is the middle where we're using and we're using single because we only

91
00:06:28,210 --> 00:06:29,830
want to allow a single file.

92
00:06:29,830 --> 00:06:33,940
You can make it so that you can upload multiple files as an array.

93
00:06:34,420 --> 00:06:36,910
It's a little more advanced, but you can do that.

94
00:06:36,910 --> 00:06:41,200
But in this case, we're only using a single image and I'm calling it image.

95
00:06:41,200 --> 00:06:44,800
But you could use anything here, but this is the field name.

96
00:06:44,800 --> 00:06:46,150
So back up here.

97
00:06:46,150 --> 00:06:50,710
When I say file dot, field name, it's going to be whatever I put here.

98
00:06:51,320 --> 00:06:59,750
So in this route, we're just going to send a response dot send because the actual upload is handled

99
00:06:59,750 --> 00:07:01,220
by the middleware by this.

100
00:07:01,220 --> 00:07:02,840
So we don't have to do much here.

101
00:07:02,840 --> 00:07:05,900
We just want to just send back something.

102
00:07:05,900 --> 00:07:09,110
So we'll send an object and we'll say message.

103
00:07:09,900 --> 00:07:18,660
And say image uploaded, and then we'll send the image path which we can get from the request object

104
00:07:18,660 --> 00:07:19,020
here.

105
00:07:19,020 --> 00:07:22,050
It'll have a file object which will have a path.

106
00:07:22,780 --> 00:07:24,100
And that should do it.

107
00:07:24,250 --> 00:07:29,540
Now, just like we did with the rest of our routes, we have to go into our server.js.

108
00:07:29,560 --> 00:07:33,700
So let's go into back end server.js just like we did with these three.

109
00:07:33,700 --> 00:07:36,620
We have to bring in our upload routes.

110
00:07:36,640 --> 00:07:38,710
So let's say import.

111
00:07:39,840 --> 00:07:41,100
Uh, upload.

112
00:07:42,280 --> 00:07:46,580
Routes from our upload routes and then just add that down here.

113
00:07:46,600 --> 00:07:55,540
So we'll say app dot use and it's going to be slash API slash upload and we want to connect that to

114
00:07:55,540 --> 00:07:57,040
our upload routes.

115
00:07:58,130 --> 00:08:06,110
Now the upload folder that we created, we want to we want to make that static, right?

116
00:08:06,140 --> 00:08:08,420
We want to be able to just access that.

117
00:08:08,420 --> 00:08:16,250
So let's put this first of all, let's bring in our path module because we need to use that.

118
00:08:16,250 --> 00:08:19,820
So I'm going to say import path from path.

119
00:08:19,820 --> 00:08:29,240
And the reason I put it at the top is because if I use a built in module like Path or FS or URL or Http

120
00:08:29,570 --> 00:08:32,809
just built in node modules, I always put those at the top.

121
00:08:32,809 --> 00:08:34,480
I think it's a good convention.

122
00:08:34,490 --> 00:08:40,100
Now we just want to set that uploads folder as as a static folder.

123
00:08:40,100 --> 00:08:45,680
So I'm going to come down here and we're going to say const double underscore Dirname.

124
00:08:46,210 --> 00:08:48,340
And set that to path resolve.

125
00:08:48,340 --> 00:08:53,770
So this is just setting this double underscore dirname to the current directory.

126
00:08:53,770 --> 00:09:00,040
And then we want to just app dot use and pass in uploads.

127
00:09:00,040 --> 00:09:03,550
So the file path is the first first argument.

128
00:09:03,550 --> 00:09:11,020
Then we're going to make it static by saying express dot static and then passing in the location of

129
00:09:11,050 --> 00:09:14,680
that folder and we're just using Path.join to do that.

130
00:09:15,130 --> 00:09:20,560
All right, so we'll save that and then we should be all set as far as our back end.

131
00:09:20,560 --> 00:09:23,650
So in the front end, we're going to add.

132
00:09:24,220 --> 00:09:30,460
In our edit screen here, we're going to add an image field and then we'll be able to select an image

133
00:09:30,460 --> 00:09:33,900
and then submit it to this route.

134
00:09:33,910 --> 00:09:35,320
So we'll do that next.