1
00:00:02,180 --> 00:00:03,013
Now it would be nice

2
00:00:03,013 --> 00:00:06,030
if you could keep the extension of our file here.

3
00:00:06,030 --> 00:00:07,300
And to achieve this,

4
00:00:07,300 --> 00:00:09,870
we have to change the configuration here

5
00:00:09,870 --> 00:00:13,070
and move away from just specifying the destination

6
00:00:13,070 --> 00:00:15,750
to actually telling Multer in detail

7
00:00:15,750 --> 00:00:18,610
how the uploaded file should be stored.

8
00:00:18,610 --> 00:00:21,844
This can be done by not setting the destination here,

9
00:00:21,844 --> 00:00:24,453
but instead the storage option.

10
00:00:25,440 --> 00:00:27,650
Storage, unlike destination,

11
00:00:27,650 --> 00:00:29,570
does not just want a path,

12
00:00:29,570 --> 00:00:32,750
but instead a complete storage object

13
00:00:32,750 --> 00:00:35,790
that contains detailed instructions about the path

14
00:00:35,790 --> 00:00:37,203
and the filename.

15
00:00:38,420 --> 00:00:41,203
For this, we can create a new constant here,

16
00:00:42,424 --> 00:00:46,387
storageOption, for example, or storageConfig

17
00:00:47,460 --> 00:00:50,273
and create one by using multer.diskStorage.

18
00:00:51,690 --> 00:00:53,700
This is a method we can execute

19
00:00:53,700 --> 00:00:57,823
which creates a new storage object as expected by Multer.

20
00:00:58,720 --> 00:01:02,270
And now we pass an object to diskStorage,

21
00:01:02,270 --> 00:01:03,687
so to this method.

22
00:01:03,687 --> 00:01:08,687
And in this object, we can specify a destination key,

23
00:01:08,970 --> 00:01:12,493
and we can specify a filename key.

24
00:01:14,560 --> 00:01:19,140
Now destination wants a function as a value,

25
00:01:19,140 --> 00:01:21,900
a function that will receive the incoming request,

26
00:01:21,900 --> 00:01:26,340
the file, and a callback function that we have to execute

27
00:01:26,340 --> 00:01:28,973
once we are done deriving a destination.

28
00:01:30,010 --> 00:01:34,520
All three parameter values here will be provided by Multer,

29
00:01:34,520 --> 00:01:37,580
because it will be Multer that's calling this function

30
00:01:37,580 --> 00:01:40,483
whenever it is seeing an incoming file.

31
00:01:42,470 --> 00:01:44,350
For filename, it's the same.

32
00:01:44,350 --> 00:01:46,650
There, we also have to define a function

33
00:01:46,650 --> 00:01:48,140
that gets the request,

34
00:01:48,140 --> 00:01:51,480
the file that was parsed by Multer,

35
00:01:51,480 --> 00:01:53,890
and a callback that we have to call

36
00:01:53,890 --> 00:01:55,710
in our function code here

37
00:01:55,710 --> 00:01:58,130
that basically returns the filename

38
00:01:58,130 --> 00:02:01,353
we chose for the uploaded file back to Multer.

39
00:02:02,260 --> 00:02:04,460
So calling these callbacks is important,

40
00:02:04,460 --> 00:02:07,810
because with that, we'll pass the configuration chosen by us

41
00:02:07,810 --> 00:02:09,610
back to Multer.

42
00:02:09,610 --> 00:02:11,980
And this is around a couple of corners,

43
00:02:11,980 --> 00:02:14,100
a bit tricky to wrap your head around,

44
00:02:14,100 --> 00:02:16,760
but in the end, these are approaches that allow us

45
00:02:16,760 --> 00:02:19,900
to provide our own logic for Multer

46
00:02:19,900 --> 00:02:23,493
to have full control over the path and the filename.

47
00:02:24,930 --> 00:02:26,930
For example, here for destination,

48
00:02:26,930 --> 00:02:29,430
to tell Multer that we wanna store the file

49
00:02:29,430 --> 00:02:30,860
in the images folder,

50
00:02:30,860 --> 00:02:35,860
we execute this cb parameter value as a function

51
00:02:36,010 --> 00:02:38,130
because it will be a function.

52
00:02:38,130 --> 00:02:40,480
Multer will give us a function

53
00:02:40,480 --> 00:02:43,610
for this third parameter value.

54
00:02:43,610 --> 00:02:48,510
And to this function, we have to pass two values.

55
00:02:48,510 --> 00:02:52,513
Multer expects two values on this function here.

56
00:02:53,700 --> 00:02:57,870
The first value is a potential error we might have

57
00:02:57,870 --> 00:03:01,780
if something went wrong with generating the destination,

58
00:03:01,780 --> 00:03:04,730
in case we have some more complex logic

59
00:03:04,730 --> 00:03:07,740
for deriving this destination.

60
00:03:07,740 --> 00:03:10,460
Here, I'll just hard code the destination.

61
00:03:10,460 --> 00:03:12,430
Hence, I won't have any error,

62
00:03:12,430 --> 00:03:14,730
and therefore, you should pass null

63
00:03:14,730 --> 00:03:18,380
as a first parameter value to this callback function,

64
00:03:18,380 --> 00:03:20,963
which will hand the data back to Multer.

65
00:03:22,310 --> 00:03:26,280
The second parameter value then is the destination path

66
00:03:26,280 --> 00:03:28,570
where you wanna store your file,

67
00:03:28,570 --> 00:03:30,453
and in my case, that's images.

68
00:03:32,250 --> 00:03:34,160
Now that's the destination function,

69
00:03:34,160 --> 00:03:36,490
and that's all we have to do here.

70
00:03:36,490 --> 00:03:38,550
So here I'm not doing anything fancy,

71
00:03:38,550 --> 00:03:41,680
I'm just setting the destination folder back to images,

72
00:03:41,680 --> 00:03:44,803
what we also had before with the dest option.

73
00:03:46,040 --> 00:03:47,820
Now the filename function

74
00:03:47,820 --> 00:03:50,990
is why I chose this approach though,

75
00:03:50,990 --> 00:03:54,030
because here we can now also call callback

76
00:03:54,030 --> 00:03:58,140
to pass the filename we wanna use for the uploaded file

77
00:03:58,140 --> 00:04:01,530
back to Multer so that we use our own filename

78
00:04:01,530 --> 00:04:04,300
instead of the default one inferred by Multer

79
00:04:04,300 --> 00:04:06,800
which is missing the extension as you'll see here.

80
00:04:07,720 --> 00:04:10,710
Here, we still pass a first parameter value,

81
00:04:10,710 --> 00:04:12,670
which could be a potential error

82
00:04:12,670 --> 00:04:15,850
we faced while generating the filename,

83
00:04:15,850 --> 00:04:18,399
but I don't have an error here,

84
00:04:18,399 --> 00:04:21,533
and then we pass the filename as a second value.

85
00:04:22,580 --> 00:04:25,880
This should now not be a hard-coded value,

86
00:04:25,880 --> 00:04:29,440
but instead here I wanna use the original filename

87
00:04:29,440 --> 00:04:34,440
and then add some random or pseudorandom value to it.

88
00:04:35,810 --> 00:04:40,240
For this, we can use the file parameter value,

89
00:04:40,240 --> 00:04:41,940
which we'll get here by Multer,

90
00:04:41,940 --> 00:04:45,360
which will be that file that Multer parsed,

91
00:04:45,360 --> 00:04:48,690
and get the originalname from that.

92
00:04:48,690 --> 00:04:52,200
So now we would store the file with its originalname

93
00:04:52,200 --> 00:04:55,400
in that folder, which is not what I want.

94
00:04:55,400 --> 00:04:57,316
But now, in front of that,

95
00:04:57,316 --> 00:05:02,110
I will actually concatenate another string,

96
00:05:02,110 --> 00:05:04,120
a dash to be precise.

97
00:05:04,120 --> 00:05:05,960
And in front of that dash,

98
00:05:05,960 --> 00:05:09,633
I will actually use Date.now.

99
00:05:11,490 --> 00:05:16,150
Date is this built-in class that's available in JavaScript.

100
00:05:16,150 --> 00:05:19,200
And here, I'm not using it to generate a new date

101
00:05:19,200 --> 00:05:21,400
based on the current timestamp.

102
00:05:21,400 --> 00:05:23,900
Instead, now is a built in method

103
00:05:23,900 --> 00:05:27,000
which we can call on the date class just like this,

104
00:05:27,000 --> 00:05:29,300
which will give us the current date

105
00:05:29,300 --> 00:05:31,490
as a number in milliseconds.

106
00:05:31,490 --> 00:05:35,080
So milliseconds since the beginning of time,

107
00:05:35,080 --> 00:05:39,943
which in JavaScript's world, was on January the 1st, 1970.

108
00:05:41,320 --> 00:05:44,640
So this will be a large number,

109
00:05:44,640 --> 00:05:46,010
then I add a dash,

110
00:05:46,010 --> 00:05:48,690
and then the original filename.

111
00:05:48,690 --> 00:05:52,440
And with that, I should have a pretty unique filename.

112
00:05:52,440 --> 00:05:56,356
Theoretically, two users could submit the same filename

113
00:05:56,356 --> 00:05:59,600
at exactly the same millisecond,

114
00:05:59,600 --> 00:06:03,023
but here for this demo application, that won't happen.

115
00:06:04,130 --> 00:06:08,710
So that is now my filename that should be used by Multer.

116
00:06:08,710 --> 00:06:11,670
And with that, we got our own storage configuration,

117
00:06:11,670 --> 00:06:16,590
which we'll pass as a value to this storage key here.

118
00:06:16,590 --> 00:06:18,370
So that was a lot of talking,

119
00:06:18,370 --> 00:06:20,720
but with that, we're now configuring Multer

120
00:06:20,720 --> 00:06:24,630
to use our own unique filename

121
00:06:24,630 --> 00:06:27,510
that does still have the extension though,

122
00:06:27,510 --> 00:06:31,663
because originalname contains the original extension.

123
00:06:34,060 --> 00:06:34,910
And therefore,

124
00:06:34,910 --> 00:06:37,970
if I delete the file that was uploaded before,

125
00:06:37,970 --> 00:06:40,190
but I keep the images folder,

126
00:06:40,190 --> 00:06:42,560
and we save everything,

127
00:06:42,560 --> 00:06:45,313
if we go back and add a new user again,

128
00:06:46,410 --> 00:06:49,853
enter a username and then choose the file,

129
00:06:51,400 --> 00:06:54,090
if I upload this, it seems to work.

130
00:06:54,090 --> 00:06:56,900
And now, you will see here in my log

131
00:06:56,900 --> 00:06:59,360
that this actually now is a filename

132
00:06:59,360 --> 00:07:01,510
which does still have the extension.

133
00:07:01,510 --> 00:07:03,620
And here in the images folder,

134
00:07:03,620 --> 00:07:05,683
you also still see the extension.

135
00:07:09,440 --> 00:07:11,410
So that's all working here.

136
00:07:11,410 --> 00:07:13,350
And now, that was a lot of work,

137
00:07:13,350 --> 00:07:16,840
but we now did have a look at how Multer can be configured.

138
00:07:16,840 --> 00:07:19,870
And now, we are ensuring that the uploaded file

139
00:07:19,870 --> 00:07:21,083
is being stored.

140
00:07:22,140 --> 00:07:25,020
Now what's not being stored is the other data

141
00:07:25,020 --> 00:07:28,660
and also not the path to the uploaded file,

142
00:07:28,660 --> 00:07:30,480
and we'll need to do that though

143
00:07:30,480 --> 00:07:32,500
to then use it on the starting page

144
00:07:32,500 --> 00:07:36,403
to output our userData, including the image.

145
00:07:37,260 --> 00:07:39,780
So that will be our next step,

146
00:07:39,780 --> 00:07:41,840
saving the data in a database

147
00:07:41,840 --> 00:07:44,693
so that we can then serve it in a second step.