Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,170 --> 00:00:03,440
In the first part of this section
2
00:00:03,440 --> 00:00:06,140
we will be learning all about uploading images
3
00:00:06,140 --> 00:00:09,660
with the Multer package and in this particular video
4
00:00:09,660 --> 00:00:13,653
we will start implementing image uploads for user photos.
5
00:00:15,230 --> 00:00:18,900
But before we start let's do some quick cleanup here
6
00:00:18,900 --> 00:00:22,450
and get rid of this constant output of
7
00:00:22,450 --> 00:00:24,570
the cookies that we have here.
8
00:00:24,570 --> 00:00:29,093
So that's somewhere down here and so that's much better.
9
00:00:30,430 --> 00:00:33,610
Now we're gonna be working on uploading user photos
10
00:00:33,610 --> 00:00:38,010
and let's open up here the user routes, all right.
11
00:00:38,010 --> 00:00:41,310
So, Multer is a very popular middleware
12
00:00:41,310 --> 00:00:45,510
to handle multi-part form data, which is a form in coding
13
00:00:45,510 --> 00:00:48,540
that's used to upload files from a form.
14
00:00:48,540 --> 00:00:51,200
So remember how in the last section we used
15
00:00:51,200 --> 00:00:55,160
a URL encoded form in order to update user data
16
00:00:55,160 --> 00:00:58,570
and for that we also had to include a special middleware.
17
00:00:58,570 --> 00:01:01,000
And so Multer is basically a middleware
18
00:01:01,000 --> 00:01:03,580
for multi-part form data.
19
00:01:03,580 --> 00:01:05,770
And now here is what we're gonna do.
20
00:01:05,770 --> 00:01:08,460
We will allow the user to upload a photo
21
00:01:08,460 --> 00:01:11,064
on the Update Me route and so instead of
22
00:01:11,064 --> 00:01:14,430
just being able to update email and photo,
23
00:01:14,430 --> 00:01:18,620
users will then also be able to upload their user photos.
24
00:01:18,620 --> 00:01:21,970
So once more, let's start by installing the package
25
00:01:21,970 --> 00:01:25,330
that we need and actually let's create a new
26
00:01:25,330 --> 00:01:30,267
terminal window here and so NPM install Multer.
27
00:01:32,586 --> 00:01:37,437
All right and here we see that we're on Multer 1.4.1.
28
00:01:38,420 --> 00:01:41,160
And so again in case you run into any trouble
29
00:01:41,160 --> 00:01:43,490
with this package please just make sure that
30
00:01:43,490 --> 00:01:45,983
you install the same version as I'm using here.
31
00:01:47,241 --> 00:01:48,074
All right.
32
00:01:49,150 --> 00:01:51,313
So, let's include that here.
33
00:01:52,930 --> 00:01:57,070
So Multer, require, Multer.
34
00:01:58,840 --> 00:02:03,040
So, easy and now we need to configure a so called
35
00:02:03,040 --> 00:02:05,780
Multer upload and then use it.
36
00:02:05,780 --> 00:02:08,030
And let's do that right here at the beginning
37
00:02:09,330 --> 00:02:14,330
and let's call it Upload and we call the Multer function
38
00:02:16,380 --> 00:02:19,090
that we just included before and then pass
39
00:02:19,090 --> 00:02:21,160
in an object for some options.
40
00:02:21,160 --> 00:02:23,730
And for now the only option that we're gonna specify
41
00:02:23,730 --> 00:02:26,180
is the destination and I'm gonna set
42
00:02:26,180 --> 00:02:31,180
it to Public/image/users, all right.
43
00:02:34,940 --> 00:02:36,870
And so that is exactly the folder
44
00:02:36,870 --> 00:02:38,780
where we want to save all the images
45
00:02:38,780 --> 00:02:40,570
that are being uploaded.
46
00:02:40,570 --> 00:02:45,570
So that's here, Public, Image and Users,
47
00:02:45,740 --> 00:02:48,063
such as all the images for all the users
48
00:02:48,063 --> 00:02:50,750
that we already have in our database.
49
00:02:50,750 --> 00:02:53,770
Right and of course we can configure this in
50
00:02:53,770 --> 00:02:56,480
a much more complex way and we're gonna be doing
51
00:02:56,480 --> 00:02:58,670
that in our next lecture but for now
52
00:02:58,670 --> 00:03:02,190
I really want you to just introduce to this package
53
00:03:02,190 --> 00:03:04,697
and by the way, we could actually just have called
54
00:03:04,697 --> 00:03:08,010
the Multer function without any options in there.
55
00:03:08,010 --> 00:03:10,940
So without this here and then the uploaded image
56
00:03:10,940 --> 00:03:13,749
would simply be stored in memory and not saved anywhere to
57
00:03:13,749 --> 00:03:17,590
the disc but of course at this point that's not what we want
58
00:03:17,590 --> 00:03:21,290
and so we at least need to specify this destination option.
59
00:03:21,290 --> 00:03:23,620
And with this our file is then really uploaded
60
00:03:23,620 --> 00:03:26,450
into a directory in our file system.
61
00:03:26,450 --> 00:03:29,080
And I mentioned this before but let's just
62
00:03:29,080 --> 00:03:31,960
make really sure that we're on the same page about this,
63
00:03:31,960 --> 00:03:34,870
which is that of course images are not directly
64
00:03:34,870 --> 00:03:37,770
uploaded into the database, we just upload them
65
00:03:37,770 --> 00:03:40,700
into our file system and then in the database
66
00:03:40,700 --> 00:03:43,510
we put a link basically to that image.
67
00:03:43,510 --> 00:03:46,170
So in this case in each user document we will
68
00:03:46,170 --> 00:03:49,450
have to name all of the uploaded file, okay.
69
00:03:49,450 --> 00:03:51,690
Now again, we're not doing that in this video
70
00:03:51,690 --> 00:03:53,550
but we will do a bit later.
71
00:03:53,550 --> 00:03:55,603
For now let's just make this work.
72
00:03:56,490 --> 00:03:59,000
Anyway, what we need to do now is to use this
73
00:03:59,000 --> 00:04:02,150
upload here to really create a middleware function
74
00:04:02,150 --> 00:04:05,223
that we can put here into the Update Me route.
75
00:04:06,100 --> 00:04:09,343
So here, and it works like this.
76
00:04:10,700 --> 00:04:14,670
So upload, dot single, and it's single because
77
00:04:14,670 --> 00:04:17,810
here we only want to update one single image
78
00:04:17,810 --> 00:04:20,829
and then here into single we pass the name of the field
79
00:04:20,829 --> 00:04:22,993
that is going to hold the image to upload.
80
00:04:24,000 --> 00:04:26,480
And so that will be photo, okay.
81
00:04:26,480 --> 00:04:29,023
And with field I mean the field in the form
82
00:04:29,023 --> 00:04:31,620
that is going to be uploading the image.
83
00:04:31,620 --> 00:04:34,400
All right, it makes sense?
84
00:04:34,400 --> 00:04:38,040
So again, we included the Multer package
85
00:04:38,040 --> 00:04:41,560
and then with that we created an upload.
86
00:04:41,560 --> 00:04:44,700
And this upload is just to define a couple of settings
87
00:04:44,700 --> 00:04:48,640
where in this example we only define the destination
88
00:04:48,640 --> 00:04:52,260
then we use that upload to create a new middleware
89
00:04:52,260 --> 00:04:55,560
that we can then add to this stack of the route
90
00:04:55,560 --> 00:04:58,400
that we want to use to upload the file.
91
00:04:58,400 --> 00:05:01,130
So for that we say upload dot single
92
00:05:01,130 --> 00:05:03,390
because we only have one single file
93
00:05:03,390 --> 00:05:06,160
and then finally we specify the name of the field
94
00:05:06,160 --> 00:05:08,570
that is going to hold this file.
95
00:05:08,570 --> 00:05:11,600
Okay, and so this middleware will then take care
96
00:05:11,600 --> 00:05:14,610
of taking the file and basically copying it
97
00:05:14,610 --> 00:05:16,960
to the destination that we specified.
98
00:05:16,960 --> 00:05:19,040
And then after that of course it will call
99
00:05:19,040 --> 00:05:22,083
the next middleware in the stack which is Update Me.
100
00:05:23,210 --> 00:05:26,470
Also, this middleware here will put the file
101
00:05:26,470 --> 00:05:28,600
or at least some information about the file
102
00:05:28,600 --> 00:05:30,810
on the request object and so let's
103
00:05:30,810 --> 00:05:33,080
actually take a look at that.
104
00:05:33,080 --> 00:05:36,123
So let's go to the Update Me function.
105
00:05:38,490 --> 00:05:42,320
So right here and right here at the beginning
106
00:05:43,300 --> 00:05:48,163
let's say console dot log, reg dot file.
107
00:05:49,630 --> 00:05:50,463
All right?
108
00:05:51,410 --> 00:05:55,430
And also I want to take a look at the body.
109
00:05:55,430 --> 00:05:58,307
Great and so with this we're now actually ready
110
00:05:58,307 --> 00:06:02,320
to test this and for now we will be testing it
111
00:06:02,320 --> 00:06:04,820
in postman but of course later on we will
112
00:06:04,820 --> 00:06:08,253
also add this functionality to the form, all right.
113
00:06:09,220 --> 00:06:13,720
So let's go to postman here and to Update Me.
114
00:06:13,720 --> 00:06:16,023
So basically to update the current user.
115
00:06:17,380 --> 00:06:20,430
And the user that I want to update is called Leo,
116
00:06:20,430 --> 00:06:23,700
so let's get him here from Compass,
117
00:06:23,700 --> 00:06:26,710
or actually I think that's not even necessary
118
00:06:26,710 --> 00:06:30,460
because in our login we already have this kind
119
00:06:30,460 --> 00:06:35,010
of email address and his email is leo@example.com
120
00:06:35,010 --> 00:06:38,090
and the password is always the same.
121
00:06:38,090 --> 00:06:41,390
And so we of course first need to login as the user
122
00:06:41,390 --> 00:06:44,653
and so now let's go ahead and then update to the user.
123
00:06:46,620 --> 00:06:50,010
So in the body we have the name and the role.
124
00:06:50,010 --> 00:06:53,593
So let's only update, let's say the name here.
125
00:06:54,560 --> 00:06:59,500
So the current name is Leo Gillespie or Gillespie,
126
00:06:59,500 --> 00:07:01,113
not sure how to say that.
127
00:07:02,800 --> 00:07:07,800
Let's just add something here in the middle, okay.
128
00:07:07,870 --> 00:07:11,283
And now finally we specify the photo property,
129
00:07:13,270 --> 00:07:16,370
or actually we should not do it like this
130
00:07:16,370 --> 00:07:21,100
but instead we should go here to form data, okay,
131
00:07:21,100 --> 00:07:22,810
because this is the way how we can
132
00:07:22,810 --> 00:07:25,543
send multi-part form data, all right.
133
00:07:26,410 --> 00:07:31,410
So, let's copy just the name here and it's Name.
134
00:07:33,470 --> 00:07:37,813
All right, so here the key is Name and
135
00:07:37,813 --> 00:07:40,763
then the value is this one.
136
00:07:42,350 --> 00:07:46,770
Next up, we then finally specify the photo field
137
00:07:46,770 --> 00:07:50,210
and then here we can actually specify what we want.
138
00:07:50,210 --> 00:07:52,700
And so instead of text which is the default
139
00:07:52,700 --> 00:07:56,520
we can specify file and then here we can select
140
00:07:56,520 --> 00:07:58,163
the file that we want to upload.
141
00:07:59,240 --> 00:08:04,240
So that file, that image, is here in our def data again,
142
00:08:04,350 --> 00:08:07,470
then in image and then here the image of Leo.
143
00:08:07,470 --> 00:08:10,430
And so that's why it shows this user.
144
00:08:10,430 --> 00:08:13,800
Okay, so click open and now I think
145
00:08:13,800 --> 00:08:16,193
we're ready to send that request.
146
00:08:17,960 --> 00:08:22,200
All right, we were successful and of course as I said before
147
00:08:22,200 --> 00:08:25,880
the photo did obviously not update here in the database
148
00:08:25,880 --> 00:08:28,450
output because that's for the next lecture.
149
00:08:28,450 --> 00:08:31,630
For now we just want to really upload this image
150
00:08:31,630 --> 00:08:33,803
to that folder that we specified.
151
00:08:34,960 --> 00:08:39,179
All right, now let's also take a look here at our output
152
00:08:39,179 --> 00:08:43,429
and so here we have request dot file, which is this one,
153
00:08:43,429 --> 00:08:46,460
and so we get all kinds of information about it.
154
00:08:46,460 --> 00:08:50,910
So the original name, it's destination that we specified,
155
00:08:50,910 --> 00:08:54,370
the new file name here, and also the size.
156
00:08:54,370 --> 00:08:57,980
Okay, so that is request dot file and then remember
157
00:08:57,980 --> 00:08:59,920
we also logged the body.
158
00:08:59,920 --> 00:09:03,810
And so the body is now only the name, all right.
159
00:09:03,810 --> 00:09:07,100
So our body parse is not really able to handle files
160
00:09:07,100 --> 00:09:09,470
and so that's why the file is not showing up
161
00:09:09,470 --> 00:09:11,790
in the body at all and of course that
162
00:09:11,790 --> 00:09:15,920
is the whole reason why we actually need the Multer package.
163
00:09:15,920 --> 00:09:19,570
Anyway, let's now take a look at our folder and so here
164
00:09:19,570 --> 00:09:24,241
we have image, users, and then somewhere here
165
00:09:24,241 --> 00:09:26,890
should be the image that we just uploaded
166
00:09:28,150 --> 00:09:30,160
but I can't really see it here.
167
00:09:30,160 --> 00:09:33,313
Let's update, ah and indeed here it is.
168
00:09:34,960 --> 00:09:37,890
So if we click it now we cannot really see it
169
00:09:37,890 --> 00:09:39,840
because as you can see here it
170
00:09:39,840 --> 00:09:42,600
doesn't even have an extension, okay.
171
00:09:42,600 --> 00:09:46,240
And so that's why we cannot really open it at this point.
172
00:09:46,240 --> 00:09:49,690
So the file really showed up here in our folder
173
00:09:49,690 --> 00:09:52,320
and so we have the upload actually working.
174
00:09:52,320 --> 00:09:54,870
Well, at least kind of but we're not really
175
00:09:54,870 --> 00:09:57,350
where we want it, right.
176
00:09:57,350 --> 00:09:59,960
So we want to give it a better file name
177
00:09:59,960 --> 00:10:02,100
and we also want to re-organize this
178
00:10:02,100 --> 00:10:04,690
code that we have at this point a little bit.
179
00:10:04,690 --> 00:10:07,123
And so let's do that in the next video.
14749
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.