1
00:00:00,210 --> 00:00:06,120
In this lesson we're gonna kick off the section by figuring out how we can add support for file uploads

2
00:00:06,330 --> 00:00:08,490
to The Express application.

3
00:00:08,490 --> 00:00:14,700
Now for the moment we're not going to worry about users being authenticated or the file being of the

4
00:00:14,700 --> 00:00:17,220
correct type such as an image.

5
00:00:17,310 --> 00:00:22,620
We're going to start by just getting the basics in place then throughout the section we'll refine the

6
00:00:22,620 --> 00:00:30,150
code to fit our specific needs which is to allow a user to upload a profile picture for their account.

7
00:00:30,390 --> 00:00:37,340
So to kick things off let's talk about how we add support for file uploads to Express Express by default.

8
00:00:37,350 --> 00:00:44,400
Actually doesn't support file uploads but there is an NPM library also released and maintained by the

9
00:00:44,400 --> 00:00:47,780
same team that releases and maintains Express.

10
00:00:47,850 --> 00:00:53,940
And this allows you to add file uploads to express with just a couple of lines of code and that's where

11
00:00:53,970 --> 00:00:55,200
we're going to start.

12
00:00:55,200 --> 00:00:58,710
So let's head over to the browser and check out the NPM library.

13
00:00:58,710 --> 00:01:03,390
We'll be using from the browser we can google NPM Malta.

14
00:01:03,540 --> 00:01:09,990
That is the name of the library we'll be integrating and we can check out the NPM package page to learn

15
00:01:09,990 --> 00:01:10,650
more.

16
00:01:10,650 --> 00:01:14,870
This is by far the most popular solution for file uploads.

17
00:01:14,880 --> 00:01:20,970
When working with note if the name of the library motor is short for multi part and this comes from

18
00:01:20,970 --> 00:01:25,150
the type of data that motor allows your application to accept.

19
00:01:25,200 --> 00:01:30,700
So so far the only data we've sent from the client to the server has been Jason data.

20
00:01:30,690 --> 00:01:37,260
We've provided that Jason as the request body and the server has passed that Jason into a javascript

21
00:01:37,290 --> 00:01:39,010
object and we've used it.

22
00:01:39,060 --> 00:01:44,430
We've done this for dozens of end points like the end point for signing up where the email password

23
00:01:44,460 --> 00:01:47,760
and other information is provided to the server.

24
00:01:47,970 --> 00:01:52,630
When it comes to file uploads we're no longer going to send a Jason body.

25
00:01:52,650 --> 00:01:55,230
Instead we'll be using form data.

26
00:01:55,230 --> 00:01:59,150
So right here this is what's going to allow us to upload files.

27
00:01:59,160 --> 00:02:05,280
So we're gonna take the file grab it's binary data and send that off to the server.

28
00:02:05,310 --> 00:02:10,170
So right here we can go ahead and kick things off with a basic example to see how all of this is going

29
00:02:10,170 --> 00:02:13,900
to fit into our existing application to get started.

30
00:02:13,920 --> 00:02:18,750
Let's go ahead and install this library over in Visual Studio code.

31
00:02:18,780 --> 00:02:27,090
We can go ahead and run a following command from the terminal that is going to be NPM AI for install.

32
00:02:27,090 --> 00:02:32,690
The library is melter at the latest version one point four point one.

33
00:02:32,700 --> 00:02:39,200
Now once we have this library in place we're going to explore a basic example right here in index dot

34
00:02:39,210 --> 00:02:43,290
J s a nice bare bones version to get started.

35
00:02:43,290 --> 00:02:50,370
I will run NPM dev to start up that dev server excuse me that is NPM run Dev.

36
00:02:50,670 --> 00:02:55,820
And once the dev server is up and running we'll actually write the correct code.

37
00:02:55,830 --> 00:03:02,700
Now none below in index dot J S we have an example we had worked with before to explore how populate

38
00:03:02,700 --> 00:03:03,350
worked.

39
00:03:03,450 --> 00:03:05,030
We can go ahead and clean that up.

40
00:03:05,040 --> 00:03:07,010
Removing it end up above.

41
00:03:07,020 --> 00:03:12,960
We had a commented out example of how to use middleware which we wrote when we were exploring how we

42
00:03:12,960 --> 00:03:16,120
could set up our own authentication middleware.

43
00:03:16,200 --> 00:03:18,760
We're going to go ahead and remove that as well.

44
00:03:18,780 --> 00:03:24,630
I'm going to add a few empty lines and right here we're going to write a little example in isolation

45
00:03:24,810 --> 00:03:28,500
of how we could add file upload to express.

46
00:03:28,500 --> 00:03:31,140
Now the first thing we have to do is a load in Malta.

47
00:03:31,140 --> 00:03:39,010
So const Malta is going to come from a call to require where we require the Malta library.

48
00:03:39,060 --> 00:03:44,250
Now typically we would put this line at the top of the file with our other require calls.

49
00:03:44,250 --> 00:03:49,830
The reason I'm placing it right here for this example is so we can see all of the code necessary to

50
00:03:49,830 --> 00:03:51,310
get this done.

51
00:03:51,360 --> 00:03:57,210
Now the next thing we have to do is configure Malta and we might configure it multiple times for a single

52
00:03:57,210 --> 00:03:58,440
application.

53
00:03:58,440 --> 00:04:02,820
Sometimes we might want to accept just PDUFA file uploads.

54
00:04:02,820 --> 00:04:09,780
Other times we just might want to accept images so we'll end up creating new instances of Malta depending

55
00:04:09,780 --> 00:04:12,170
on the needs of our application.

56
00:04:12,180 --> 00:04:17,520
Now in this case we're not going to worry about performing any validation will allow any file to be

57
00:04:17,550 --> 00:04:19,190
uploaded to the server.

58
00:04:19,410 --> 00:04:21,290
So down below what are we going to do.

59
00:04:21,300 --> 00:04:28,200
We are going to create a new variable typically called upload and we are going to call Malta to get

60
00:04:28,200 --> 00:04:30,880
a new instance of it right here.

61
00:04:31,020 --> 00:04:36,810
We passed to it an options object and this is where we're going to provide all of the configuration

62
00:04:36,840 --> 00:04:38,640
for the tool for the moment.

63
00:04:38,640 --> 00:04:45,030
We're going to provide just one property that is dest which is short for a destination.

64
00:04:45,030 --> 00:04:48,570
And this is the only one we need to get started right here.

65
00:04:48,570 --> 00:04:53,640
We can pick a name for the folder where all of the uploads should be stored.

66
00:04:53,640 --> 00:04:58,080
I'll go ahead and pick something like images now with this in place.

67
00:04:58,080 --> 00:05:04,910
We can focus on actually creating a new end point where the client will be able to upload these files

68
00:05:05,060 --> 00:05:06,300
to set up the end point.

69
00:05:06,320 --> 00:05:12,530
We're gonna use a post HDTV method which is required for uploading images right here and that would

70
00:05:12,530 --> 00:05:16,610
be app dot post and we'll set up an end point for this one.

71
00:05:16,610 --> 00:05:19,260
Let's just use something generic for this example.

72
00:05:19,280 --> 00:05:24,580
This isn't going to be the actual route that makes it into the final version of the task manager.

73
00:05:24,920 --> 00:05:28,270
So I'll use something like forward slash upload.

74
00:05:28,400 --> 00:05:34,930
From here we can go ahead and set up our request and response arguments in our little root handler and

75
00:05:34,930 --> 00:05:42,350
all we're going to do is use a response dot send to send back a two hundred with no response body.

76
00:05:42,350 --> 00:05:47,960
Now when it comes to actually adding support for upload what we get access to is middleware from the

77
00:05:47,960 --> 00:05:49,550
multi-year library.

78
00:05:49,550 --> 00:05:56,120
So right here in between the path and the function we're going to register the multi-year middleware

79
00:05:56,330 --> 00:06:00,500
similar to how we would do this with our authentication middleware.

80
00:06:00,500 --> 00:06:01,670
What are we going to do.

81
00:06:01,700 --> 00:06:05,700
We're gonna use upload and we are going to call a function on it.

82
00:06:05,720 --> 00:06:08,630
That's going to return the middleware we need to use.

83
00:06:08,660 --> 00:06:10,450
And this is single.

84
00:06:10,490 --> 00:06:12,470
So right here what are we doing.

85
00:06:12,500 --> 00:06:18,980
We first provide our string argument then we provide whatever comes back from the call to single as

86
00:06:18,980 --> 00:06:20,490
the second argument.

87
00:06:20,510 --> 00:06:25,810
And finally we provide our root handler as that third and final argument.

88
00:06:25,970 --> 00:06:30,230
Now single requires a single argument it is a string.

89
00:06:30,230 --> 00:06:33,170
And here we just pick a name for the upload.

90
00:06:33,230 --> 00:06:40,160
So I'm going to use something like upload perfect now that we have this in place our server is actually

91
00:06:40,160 --> 00:06:45,290
configured to accept and save files that are uploaded to it.

92
00:06:45,290 --> 00:06:51,080
Let's go ahead and figure out how we can actually get this done for the moment we'll stick to file uploads

93
00:06:51,080 --> 00:06:57,080
from postmen but I am going to include a bonus section with a course that'll show you how to get this

94
00:06:57,080 --> 00:06:59,350
done from the browser as well.

95
00:06:59,360 --> 00:07:04,430
Now throughout this section we'll be uploading a lot of different files of different to file types to

96
00:07:04,430 --> 00:07:10,370
the server and to make it a lot easier for you to work with the videos I've included all of the files

97
00:07:10,370 --> 00:07:15,660
that I'll be using you can download them by heading over to the following U.R.L. links.

98
00:07:15,670 --> 00:07:23,030
Dot Mead dot I O forward slash files here you're going to be greeted with a download button where you

99
00:07:23,030 --> 00:07:29,390
can download a directory called Node course images we're gonna take a quick moment to download that

100
00:07:29,960 --> 00:07:36,260
then I'm gonna go ahead and click it to expand that directory and view it in the downloads folder and

101
00:07:36,260 --> 00:07:43,370
right here I have the contents of the directory I have three images fall I have Philly and I have a

102
00:07:43,370 --> 00:07:50,300
profile pic and I have a couple of other files of different types I have an old word doc using the DOT

103
00:07:50,360 --> 00:07:59,000
Doc extension I have a new word doc using the DOT Doc X extension and I have a sample PD f all of which

104
00:07:59,000 --> 00:08:05,180
we'll be using throughout this section as we explore file uploads I recommend using these same files

105
00:08:05,240 --> 00:08:09,820
and images I have here as it will be a little easier to follow along.

106
00:08:10,010 --> 00:08:15,230
Now for the moment it doesn't matter what we upload so let's go ahead and move into postmen and figure

107
00:08:15,230 --> 00:08:16,970
out how to get this done.

108
00:08:17,030 --> 00:08:23,190
The first thing I'm going to do is close all open tabs I have a whole bunch open and I don't want that.

109
00:08:23,330 --> 00:08:28,040
So I can right click any of the tabs and click close all tabs.

110
00:08:28,040 --> 00:08:33,470
Now if I've made changes to any of the requests it's going to ask me if I want to save those changes

111
00:08:33,770 --> 00:08:36,920
I'll go ahead and save changes for everything.

112
00:08:36,920 --> 00:08:39,650
And now we're back to a nice empty request.

113
00:08:39,650 --> 00:08:42,530
And this is exactly what we're going to start with.

114
00:08:42,530 --> 00:08:47,690
We're not going to worry about adding this request to the task app collection as once again and this

115
00:08:47,690 --> 00:08:52,190
is just an example end point to see how all of this works right here.

116
00:08:52,220 --> 00:08:53,840
Let's start with the basics.

117
00:08:53,870 --> 00:09:02,610
We have to use the post HDTV method and we're going to set up r You are our local host on port three

118
00:09:02,610 --> 00:09:07,460
thousand forward slash upload was the U.R.L. we decided to work with.

119
00:09:07,470 --> 00:09:12,240
Now it comes to specifying the data we want to send across the wire.

120
00:09:12,300 --> 00:09:18,630
Now if I was sending a Jason and request body I know how I would get that done I would go over to body.

121
00:09:18,630 --> 00:09:23,560
I'd go to raw switch that to Jason and provide my data down below.

122
00:09:23,580 --> 00:09:28,780
Now in this case as mentioned earlier we need to use what's known as form and data.

123
00:09:28,780 --> 00:09:34,920
This is where we can specify the binary data for a file whether it's an image or something else that

124
00:09:34,920 --> 00:09:37,170
we want to upload to the server.

125
00:09:37,290 --> 00:09:41,000
Now right here we are greeted with a series of key value pairs.

126
00:09:41,040 --> 00:09:47,130
We could have one or we could have multiple and this is where we provide the content we want to upload.

127
00:09:47,130 --> 00:09:54,790
Now the key you type in needs to match up exactly with the value you provided to single over here.

128
00:09:54,810 --> 00:10:01,380
So here we'll telling melter to look for a file called upload when the request comes in.

129
00:10:01,560 --> 00:10:03,060
If I use something different.

130
00:10:03,120 --> 00:10:04,650
Is not going to find it.

131
00:10:04,650 --> 00:10:10,330
That means over here in post man I want to type in upload.

132
00:10:10,350 --> 00:10:11,670
Next up the value.

133
00:10:11,670 --> 00:10:14,180
This is where we provide the file itself.

134
00:10:14,190 --> 00:10:16,930
Now it's asking us to type some value in.

135
00:10:16,980 --> 00:10:22,710
This is not going to work for us since I want to upload an entire file so all I'm going to do is switch

136
00:10:22,710 --> 00:10:29,910
this from being text over to file using the dropdown then postman is going to allow me to select the

137
00:10:29,910 --> 00:10:31,850
file from the file system.

138
00:10:31,920 --> 00:10:35,610
Right here we can go ahead and pick any of the images we'd like.

139
00:10:35,610 --> 00:10:37,290
Let's go ahead and upload this one.

140
00:10:37,320 --> 00:10:38,690
Billy dot JP.

141
00:10:38,690 --> 00:10:43,930
Gee this is a picture of city hall in Center City Philadelphia.

142
00:10:43,950 --> 00:10:50,430
I'm gonna go ahead and click open it to attach that to upload and all we need to do is send this off

143
00:10:50,760 --> 00:10:51,750
when we send it off.

144
00:10:51,750 --> 00:10:53,250
The following is gonna happen.

145
00:10:53,250 --> 00:10:56,610
First stop it's going to match with the route we've created.

146
00:10:56,610 --> 00:11:03,410
We're using post and upload then mult there is going to look for the file called upload in the request.

147
00:11:03,420 --> 00:11:09,840
It's going to find it and it's gonna save it to the images directory which it's actually already created.

148
00:11:09,840 --> 00:11:13,160
Now that folder is empty but it won't be in just a moment.

149
00:11:13,230 --> 00:11:18,420
Now if the image gets uploaded correctly then it will continue on running our function and we'll get

150
00:11:18,420 --> 00:11:22,010
our 200 response back over and post man.

151
00:11:22,020 --> 00:11:27,750
I'm going to click send to work through that process I just described right here I get a two hundred

152
00:11:28,140 --> 00:11:34,860
and if I head over to visual studio code in that image is directory I now have a file.

153
00:11:34,890 --> 00:11:41,730
Now if we try to open this file in Visual Studio code we're gonna get the following error VRC is complaining

154
00:11:41,730 --> 00:11:47,370
because it's binary data and it doesn't know how to render the file contents.

155
00:11:47,370 --> 00:11:54,150
The only reason that's the case has to do with the file name so right here we have a file name which

156
00:11:54,150 --> 00:11:57,410
is just a randomly generated series of characters.

157
00:11:57,420 --> 00:12:00,080
We'll learn how to address this a bit later.

158
00:12:00,090 --> 00:12:02,910
The problem is that there's no file extension.

159
00:12:03,030 --> 00:12:07,230
We can preview the image to make sure it's the right one we uploaded by clicking.

160
00:12:07,230 --> 00:12:14,910
Rename using the right arrow to go to the end and just adding the same file extension as the original

161
00:12:14,940 --> 00:12:17,070
file we uploaded which was done.

162
00:12:17,060 --> 00:12:18,360
JP G.

163
00:12:18,630 --> 00:12:23,170
When we do this visual studio code we'll learn how to correctly pass the image.

164
00:12:23,280 --> 00:12:29,370
And now we can open it up just to preview it so we won't need to manually change file extensions in

165
00:12:29,370 --> 00:12:30,240
the future.

166
00:12:30,270 --> 00:12:37,440
That's just a temporary work around until we learn more about how we can use motor to upload files.

167
00:12:37,440 --> 00:12:38,840
Now it's challenge time.

168
00:12:38,850 --> 00:12:45,740
It's going to be your job to use Mulder to create a new end point for uploading the user's profile picture

169
00:12:45,750 --> 00:12:47,520
over in the user router.

170
00:12:47,520 --> 00:12:50,280
Now once again we're just focused on the basics.

171
00:12:50,280 --> 00:12:55,890
We're not going to worry about actually authenticating the user or associating the upload with their

172
00:12:55,890 --> 00:12:57,010
user account.

173
00:12:57,030 --> 00:13:00,540
We'll worry about all of that as we progress through the section.

174
00:13:00,540 --> 00:13:06,150
For now we can head over to the user router we can scroll to the very bottom of the file and I'll paste

175
00:13:06,150 --> 00:13:09,780
the challenge comments in so we can talk about what I'd like you to do.

176
00:13:10,350 --> 00:13:16,980
So right here your goal is to add a new end point to this router you're gonna setup post forward slash

177
00:13:17,040 --> 00:13:21,340
users forward slash me forward slash avatar.

178
00:13:21,360 --> 00:13:27,300
This is the end point that users will eventually use to upload a new profile picture.

179
00:13:27,300 --> 00:13:33,270
Now later on we will associate the upload with the user account and will require authentication.

180
00:13:33,330 --> 00:13:35,420
But let's start with the basics first.

181
00:13:35,580 --> 00:13:40,650
So you'll setup that end point and then you're going to set up melter so you'll have to require it in

182
00:13:40,650 --> 00:13:41,670
and configure it.

183
00:13:41,670 --> 00:13:48,180
Creating a destination directory and in this case I'd like you to save the uploads to a folder called

184
00:13:48,240 --> 00:13:49,710
avatars.

185
00:13:49,710 --> 00:13:54,350
Now once you have that in place you're going to use the middleware with the new request.

186
00:13:54,450 --> 00:13:58,190
And when you provide the name to the single method.

187
00:13:58,230 --> 00:14:03,990
Go ahead and use Avatar as well over an index dot in J S I had used upload.

188
00:14:04,020 --> 00:14:07,470
You'll use avatar for the new route you're creating.

189
00:14:07,470 --> 00:14:14,430
So back end users dot J s step four is to just send back that two hundred response from the root handler

190
00:14:14,580 --> 00:14:20,850
at the end and finally you're going to test your work try to upload one of the other images from the

191
00:14:20,850 --> 00:14:22,370
directory I've provided.

192
00:14:22,650 --> 00:14:28,800
Then go ahead and change its extension and open it to make sure it's the correct image showing up so

193
00:14:28,800 --> 00:14:33,870
take some time to knock that out test your work and when you're done come back and click play

194
00:14:37,860 --> 00:14:38,670
how'd that go.

195
00:14:38,670 --> 00:14:43,080
Let's go ahead and kick things off together by setting up the brand new route right here.

196
00:14:43,080 --> 00:14:47,180
That would be router dot post to setup a post request.

197
00:14:47,430 --> 00:14:53,850
Then the U.R.L. forward slash users forward slash me forward slash avatar.

198
00:14:53,850 --> 00:14:58,260
Now remember the type of data we're sending along is not a Jason body.

199
00:14:58,320 --> 00:15:04,280
It is the form data and that's why we have a completely separate request for uploading the avatar.

200
00:15:04,290 --> 00:15:09,720
It wouldn't be possible to combine this with something like the other request for updating a user's

201
00:15:09,840 --> 00:15:13,570
profile so right here we're gonna go ahead and continue on.

202
00:15:13,620 --> 00:15:18,850
I'll actually skip to step number 4 to set up our root handler right here.

203
00:15:18,870 --> 00:15:24,980
Request and response and we'll just use response dot send to send back a two hundred.

204
00:15:24,990 --> 00:15:30,930
Now let's go ahead and actually load Mulder in and configure it to work as we want it to work up at

205
00:15:30,930 --> 00:15:33,780
the very top of the file like we typically do.

206
00:15:33,780 --> 00:15:42,330
I will load the library in const Mulder equals I'm gonna use require to load that library and once we

207
00:15:42,330 --> 00:15:47,790
have that in place we'll head back down below and actually configure it specifying the only thing we

208
00:15:47,790 --> 00:15:53,280
need to specify and the only thing we know about the destination directory.

209
00:15:53,280 --> 00:16:02,590
So down here we can create our new upload we're going to call Mulder providing the options object and

210
00:16:02,590 --> 00:16:06,370
I will set destination equal to avatars.

211
00:16:06,370 --> 00:16:09,970
As I mentioned in the challenged comments for step two.

212
00:16:10,090 --> 00:16:15,880
Next up step number three we actually want to register that middleware to be used with this request

213
00:16:16,150 --> 00:16:22,900
so we'll add upload dot single right here between our path and our route handler and I will provide

214
00:16:22,930 --> 00:16:23,680
as the key.

215
00:16:23,680 --> 00:16:28,520
We're looking for Avatar mentioned down below in Step number three.

216
00:16:28,630 --> 00:16:34,500
Now that we have this in place we're actually all done when it comes to the code part of the challenge.

217
00:16:34,600 --> 00:16:40,900
We're going to move on to Step Number Five and test our work to make sure we can upload files to that

218
00:16:40,930 --> 00:16:43,860
avatars directory right here.

219
00:16:43,870 --> 00:16:50,050
I will remove the challenge comments I'm going to save user dot J S and we're going to test things out

220
00:16:50,050 --> 00:16:51,420
from postmen.

221
00:16:51,430 --> 00:16:57,370
Now for this one we can create a new request inside of the task app collection as the end point you

222
00:16:57,370 --> 00:17:01,420
just made will actually be part of the task manager app.

223
00:17:01,810 --> 00:17:07,000
So right here I'm going to add a new request we can call this anything we'd like.

224
00:17:07,000 --> 00:17:14,860
Let's use something like upload Avatar I'll create the request then I will click it to expand it and

225
00:17:14,860 --> 00:17:17,020
we can start to fill things out now.

226
00:17:17,020 --> 00:17:20,300
Authorization is already set up but it's not required.

227
00:17:20,320 --> 00:17:22,950
We can leave it on though there's no need to disable it.

228
00:17:23,140 --> 00:17:30,280
Right here we will switch from get to post I'll use the environment variable for our real requests to

229
00:17:30,280 --> 00:17:38,370
set up the U.R.L. then forward slash users forward slash me forward slash avatar.

230
00:17:38,380 --> 00:17:43,240
Next up we're gonna go ahead and focus on the data we're sending across under a body.

231
00:17:43,240 --> 00:17:48,270
We're gonna be sending some form and data and the key that we picked was Avatar.

232
00:17:48,280 --> 00:17:55,110
This value needs to match up with the value you chose right here and mine do indeed match up.

233
00:17:55,480 --> 00:17:56,130
Next up.

234
00:17:56,230 --> 00:18:01,990
Back inside of postmen we are going to switch from a text value to a file value.

235
00:18:01,990 --> 00:18:08,650
And I'm going to pick the file I'll go ahead and upload this one the profile picture of a robot I'll

236
00:18:08,650 --> 00:18:16,210
click open click send to fire it off and what do I get I get a two hundred response over inside a visual

237
00:18:16,210 --> 00:18:23,680
studio code in that avatars directory I have the very first profile picture uploaded and to preview

238
00:18:23,680 --> 00:18:30,970
it and make sure it's actually what we uploaded I will just rename it adding on to the end dot JP gee

239
00:18:31,540 --> 00:18:37,180
this is going to allow visual studio code to show it and right here we have that picture showing up

240
00:18:37,660 --> 00:18:43,090
later on in the section we'll learn how to actually serve these images up to the browser but for now

241
00:18:43,120 --> 00:18:49,570
this is just a temporary work around allowing us to build up from the basics now that we have this in

242
00:18:49,570 --> 00:18:55,050
place we've seen how we can configure melter to work in our application in the next lesson we're going

243
00:18:55,050 --> 00:19:00,790
to talk about how we can validate the things that are being uploaded I'm excited to get to that and

244
00:19:00,790 --> 00:19:01,450
I'll see you soon.