1
00:00:00,000 --> 00:00:04,223
[MUSIC]

2
00:00:04,223 --> 00:00:09,176
File uploads are a common feature
supported by many servers.

3
00:00:09,176 --> 00:00:13,642
So, when you fill out a form for
example, you might have a field there

4
00:00:13,642 --> 00:00:18,600
where you fill out a file name and
then upload that file to the server-side.

5
00:00:18,600 --> 00:00:19,545
As an example,

6
00:00:19,545 --> 00:00:23,890
suppose you are uploading the information
about a dish to the server-side.

7
00:00:23,890 --> 00:00:28,300
Then you will wish to also upload
the corresponding image of the dish

8
00:00:28,300 --> 00:00:29,510
to the server-side.

9
00:00:29,510 --> 00:00:34,915
So in the process, you will first upload
the image of the dish to the server-side,

10
00:00:34,915 --> 00:00:36,770
obtain a URL for

11
00:00:36,770 --> 00:00:41,170
that image from the server-side
wherever it is uploaded and stored, and

12
00:00:41,170 --> 00:00:47,380
then use that image in the JSON document
that describes the dish in detail.

13
00:00:47,380 --> 00:00:53,050
So that subsequently, when clients
retrieve the JSON document describing

14
00:00:53,050 --> 00:00:59,790
the dish in order to render the UI, then,
from within the JSON document, they'll be

15
00:00:59,790 --> 00:01:04,310
able to obtain the URL of the dish image
that has been uploaded to the server-side.

16
00:01:04,310 --> 00:01:07,510
And then use it in constructing the UI.

17
00:01:07,510 --> 00:01:12,500
So in the examples that we have seen so
far, when we looked at the details of

18
00:01:12,500 --> 00:01:16,880
a dish, we have seen that there is an
image filled in there, which is a string,

19
00:01:16,880 --> 00:01:24,540
which is nothing but the URL for that
image corresponding to that specific dish.

20
00:01:24,540 --> 00:01:32,300
Or the promotion or the reader as we
have constructed in our REST API server.

21
00:01:32,300 --> 00:01:37,210
Now in this lecture, we're going to
learn more about uploading files.

22
00:01:37,210 --> 00:01:39,802
How is it supported in a server?

23
00:01:39,802 --> 00:01:43,940
And then how we can leverage a node module

24
00:01:43,940 --> 00:01:48,590
that enables us to support
uploading of files.

25
00:01:50,260 --> 00:01:53,630
File uploads are typically
supported through a form input.

26
00:01:53,630 --> 00:01:58,530
So in an input,
if you specify the type as file and

27
00:01:58,530 --> 00:02:03,800
the name as the name of the field there,

28
00:02:03,800 --> 00:02:09,210
then you would be able to supply
the file that will be uploaded

29
00:02:09,210 --> 00:02:14,400
when you click on that submit button for
this particular form here.

30
00:02:14,400 --> 00:02:20,234
Now, when the file information
is uploaded to the server-side,

31
00:02:20,234 --> 00:02:24,714
the form data itself is
typically encoded as either

32
00:02:24,714 --> 00:02:31,200
application/x-www-form-urlencoded or
multipart/form-data.

33
00:02:31,200 --> 00:02:35,900
So then you design your form, for
example, you will design your form with

34
00:02:35,900 --> 00:02:40,450
action set to /imageUpload
at REST API incline,

35
00:02:40,450 --> 00:02:48,760
which will be acting as the end point
to which you do the post of the image.

36
00:02:48,760 --> 00:02:53,870
So that corresponding method would
be post, and the encoding type,

37
00:02:53,870 --> 00:02:58,140
you would set it to
multipart/form-data within your form.

38
00:02:58,140 --> 00:03:02,797
So this means that the form elements
will be encoded into the encoding type,

39
00:03:02,797 --> 00:03:05,920
and then uploaded to the server-side.

40
00:03:05,920 --> 00:03:11,228
File upload is more efficient
with multipart/form-data.

41
00:03:11,228 --> 00:03:16,130
And hence, that is the preferred approach
that we use for uploading files.

42
00:03:17,560 --> 00:03:22,945
Now, if you want to know more
details about file upload and

43
00:03:22,945 --> 00:03:28,843
form upload and application
application/x-www-form-urlencoded or

44
00:03:28,843 --> 00:03:33,848
the multipart/form-data,
then you can read the HTML5

45
00:03:33,848 --> 00:03:37,410
(W3C Recommendation) where
the details are given, and

46
00:03:37,410 --> 00:03:42,270
also the corresponding IETF Request for
Commented documents.

47
00:03:42,270 --> 00:03:47,190
I have links to these in the additional
resources in case you wish to read more

48
00:03:47,190 --> 00:03:54,070
about the actual details of how these
form encoding types are supported.

49
00:03:55,090 --> 00:04:00,110
From our perspective,
when we use the multipart/form-data,

50
00:04:00,110 --> 00:04:04,850
when this is included into a HTTP request

51
00:04:04,850 --> 00:04:10,040
message that is going to the server-side,
then in the header of the request message,

52
00:04:10,040 --> 00:04:15,320
you will have a content type
set to multipart/form-data.

53
00:04:15,320 --> 00:04:19,410
And then also a boundary
value set up like that.

54
00:04:19,410 --> 00:04:23,305
The boundary separates the multiple
parts of the request body.

55
00:04:23,305 --> 00:04:28,215
So the request body itself of the outgoing
request message will be divided

56
00:04:28,215 --> 00:04:29,475
into multiple parts.

57
00:04:29,475 --> 00:04:33,375
And each part will be delineated
from the previous part

58
00:04:33,375 --> 00:04:36,582
by by using this boundary here.

59
00:04:36,582 --> 00:04:40,912
Now, in order to further illustrate
to you the details, I have rigged up

60
00:04:40,912 --> 00:04:45,292
the server to print out this information
from the incoming request message.

61
00:04:45,292 --> 00:04:49,202
So that we can examine
this in a bit more detail.

62
00:04:49,202 --> 00:04:52,092
Taking a look at the details for

63
00:04:52,092 --> 00:04:57,850
a specific message that I have sent
from my postman to the server-side,

64
00:04:57,850 --> 00:05:03,250
you can notice that here,
I have printed the request headers here.

65
00:05:03,250 --> 00:05:08,530
And in particular, in the request header,
let me draw your attention to this header

66
00:05:08,530 --> 00:05:13,500
here, called content type,
which is set to multipart/form-data.

67
00:05:13,500 --> 00:05:17,720
And then note in particular
the boundary defined here

68
00:05:17,720 --> 00:05:20,660
with this long number in here.

69
00:05:20,660 --> 00:05:23,500
So that is the request header for

70
00:05:23,500 --> 00:05:28,400
the incoming request message that I
have posted by using post method.

71
00:05:28,400 --> 00:05:32,750
In fact, this is exactly the request
message that I will be using

72
00:05:32,750 --> 00:05:37,710
in the exercise that follows this
lecture in order to upload the file.

73
00:05:37,710 --> 00:05:42,110
So when we upload that file there,
all right, you will notice that in

74
00:05:42,110 --> 00:05:46,920
the request body, so this is where I print
out the request body down below here.

75
00:05:46,920 --> 00:05:49,010
And in the request body,

76
00:05:49,010 --> 00:05:54,460
you will notice that it prints
out this particular line here.

77
00:05:54,460 --> 00:05:58,040
And this corresponds to the boundary
that is specified here.

78
00:05:58,040 --> 00:06:04,717
So this boundary essentially specifies the
separation between the various parts of

79
00:06:04,717 --> 00:06:10,070
the multipart body that is
part of this request message.

80
00:06:10,070 --> 00:06:13,330
So in the request body,
you'll see this being defined here.

81
00:06:13,330 --> 00:06:18,810
In addition, you will also specify
the same Content-Disposition as form-data,

82
00:06:18,810 --> 00:06:22,361
so which means they'll
interpret this as form data and

83
00:06:22,361 --> 00:06:24,920
the corresponding name a s imageFile.

84
00:06:26,120 --> 00:06:30,569
And the file name itself from
the client side that has been uploaded,

85
00:06:30,569 --> 00:06:33,220
the file name itself is given here.

86
00:06:33,220 --> 00:06:38,180
And then down below it says
Content-Type: image/png.

87
00:06:38,180 --> 00:06:41,620
So I am uploading this
PNG image file here.

88
00:06:41,620 --> 00:06:44,220
So this is the details
that is described here.

89
00:06:44,220 --> 00:06:48,870
And as you scroll down into
the request body itself,

90
00:06:48,870 --> 00:06:53,480
you will see the details of what
is included in the request body.

91
00:06:53,480 --> 00:07:00,680
So this inside the PNG file here, you will
see this information in the PNG file.

92
00:07:00,680 --> 00:07:03,970
So if you open the PNG file,
this is what you would see in here.

93
00:07:03,970 --> 00:07:07,200
So this contains a whole
bunch of characters here,

94
00:07:07,200 --> 00:07:09,960
which obviously on the screen
cannot be printed.

95
00:07:09,960 --> 00:07:14,980
So as you scroll down,
you will this whole set of information,

96
00:07:16,960 --> 00:07:21,730
which is actually what is contained
in the request body of the request

97
00:07:21,730 --> 00:07:26,310
message that is uploading this
particular file to the server-side.

98
00:07:26,310 --> 00:07:30,720
So you see that that body actually
contains the encoded version

99
00:07:30,720 --> 00:07:33,640
of the image there.

100
00:07:33,640 --> 00:07:39,650
And this is the end of the boundary for
that request body.

101
00:07:39,650 --> 00:07:44,960
So in our request message,
we just have one file included in here.

102
00:07:44,960 --> 00:07:48,230
You could also upload multiple
files if you still wish to.

103
00:07:48,230 --> 00:07:53,140
But then, you need to configure
the npm module appropriately to

104
00:07:53,140 --> 00:07:55,490
accept multiple files.

105
00:07:55,490 --> 00:08:02,780
So, this is how your request body
itself contains the encoded version

106
00:08:02,780 --> 00:08:08,045
of the image, from which your
server will extract the image,

107
00:08:08,045 --> 00:08:12,515
and then save it into the file with
the same file name on the server-side.

108
00:08:12,515 --> 00:08:17,245
So this is how we will configure our
application, the server-side application,

109
00:08:17,245 --> 00:08:21,095
to do in the exercise that
follows this lecture.

110
00:08:21,095 --> 00:08:23,990
So I thought that it'll be an interesting

111
00:08:23,990 --> 00:08:28,500
step to illustrate to you exactly
what my server is receiving.

112
00:08:28,500 --> 00:08:33,090
And so this will tell why we
are are specifying this boundary here.

113
00:08:33,090 --> 00:08:35,230
And how, within the request body itself,

114
00:08:35,230 --> 00:08:41,163
we are using the boundary to delineate
the various parts of the request body.

115
00:08:41,163 --> 00:08:43,895
So the server-side, when it processes,

116
00:08:43,895 --> 00:08:49,645
will be able to extract the image data
from the request body appropriately,

117
00:08:49,645 --> 00:08:52,660
and then save the image
file on the server-side.

118
00:08:53,890 --> 00:08:59,030
So just as I have
illustrated in the terminal

119
00:08:59,030 --> 00:09:03,320
there that boundary separates
the multipass request part.

120
00:09:03,320 --> 00:09:06,538
And so
you saw the boundary specified there.

121
00:09:06,538 --> 00:09:12,843
In order to work with the multipart
form data contained in the request body,

122
00:09:12,843 --> 00:09:17,768
we're going to use an NPR module
that supports the processing

123
00:09:17,768 --> 00:09:22,610
of multipart form data included
inside the request body.

124
00:09:22,610 --> 00:09:25,290
It'll automatically extract everything for
you, and

125
00:09:25,290 --> 00:09:31,218
then load it onto two objects on
the request object on the server-side.

126
00:09:31,218 --> 00:09:36,840
So this npm module called Multer,
which when installed

127
00:09:36,840 --> 00:09:41,280
on your server-side application and

128
00:09:41,280 --> 00:09:44,910
configure your express
server to use Multer.

129
00:09:44,910 --> 00:09:49,370
Then you will be able to process
the incoming request message that

130
00:09:49,370 --> 00:09:52,560
contains this multipart/form-data
in the request message.

131
00:09:52,560 --> 00:09:56,190
So Multer is the node
module where that will

132
00:09:56,190 --> 00:09:59,930
help the server handle
multipart/form-data.

133
00:09:59,930 --> 00:10:04,330
This is written on top of another
npm module called busboy.

134
00:10:04,330 --> 00:10:11,480
Busboy is a module that processes incoming
HTML form data, general HTML form data.

135
00:10:11,480 --> 00:10:16,350
And a particular,
Multer brings upon busboy to enable you to

136
00:10:16,350 --> 00:10:20,330
process multipart /form-data
on your server-side.

137
00:10:20,330 --> 00:10:24,040
Now when it parses this information,
Multer will

138
00:10:24,040 --> 00:10:29,280
upload the incoming form data and
it adds a body object to the req.

139
00:10:29,280 --> 00:10:34,070
So you will have a req.body object and
also a req.file object.

140
00:10:34,070 --> 00:10:38,861
If you upload a single file,
then it'll continue req.file object.

141
00:10:38,861 --> 00:10:44,042
Then if you set up your Multer
to accept multiple file uploads,

142
00:10:44,042 --> 00:10:47,590
then you can set up the req.files object.

143
00:10:47,590 --> 00:10:51,480
The files object will be an array
which contains all the information for

144
00:10:51,480 --> 00:10:54,878
each particular file that is
uploaded on the server-side.

145
00:10:54,878 --> 00:11:00,565
The file object itself contains
information that summarizes

146
00:11:00,565 --> 00:11:05,714
the way the file is saved on
the server-side by Multer.

147
00:11:05,714 --> 00:11:09,219
With this quick understanding
of how file upload works,

148
00:11:09,219 --> 00:11:14,340
let's move onto the exercise where we will
actually configure the Multer module.

149
00:11:14,340 --> 00:11:19,113
And then use it within our express
application to handle file uploads

150
00:11:19,113 --> 00:11:20,685
from the client side.

151
00:11:20,685 --> 00:11:26,869
[MUSIC]