1
00:00:02,130 --> 00:00:05,260
And it's a good idea to stop at this point

2
00:00:05,260 --> 00:00:08,970
and take a pause and think about file storage

3
00:00:08,970 --> 00:00:13,790
and where we wanna do store our uploaded files.

4
00:00:13,790 --> 00:00:17,020
So we got a file incoming to our server side.

5
00:00:17,020 --> 00:00:19,800
We're using Multer to extract that file.

6
00:00:19,800 --> 00:00:21,050
And as I explained,

7
00:00:21,050 --> 00:00:25,230
Multer will actually automatically store that file for us.

8
00:00:25,230 --> 00:00:29,070
But the question is where should Multer store that file?

9
00:00:29,070 --> 00:00:32,280
Where should this uploaded file be stored?

10
00:00:32,280 --> 00:00:34,320
And of course, one idea you might have

11
00:00:34,320 --> 00:00:36,800
is to store it in a database.

12
00:00:36,800 --> 00:00:38,420
After all, that is where we stored

13
00:00:38,420 --> 00:00:40,110
all the other data as well,

14
00:00:40,110 --> 00:00:42,300
and that is where we will also store

15
00:00:42,300 --> 00:00:44,273
the username for example.

16
00:00:45,600 --> 00:00:50,600
But storing a file in a database would not be a good idea.

17
00:00:50,780 --> 00:00:54,530
Databases are not built for storing files.

18
00:00:54,530 --> 00:00:58,170
They are not file storage systems.

19
00:00:58,170 --> 00:01:01,540
So you should not store files in databases.

20
00:01:01,540 --> 00:01:03,640
Instead, store simple data

21
00:01:03,640 --> 00:01:07,270
like names or ages or dates or prices.

22
00:01:07,270 --> 00:01:09,520
Store that in databases.

23
00:01:09,520 --> 00:01:13,810
So everything that's not a file should go into a database.

24
00:01:13,810 --> 00:01:15,913
Files should not go in there.

25
00:01:17,750 --> 00:01:20,470
Instead, files should simply be stored

26
00:01:20,470 --> 00:01:25,470
on the regular file system, so somewhere on your hard drive.

27
00:01:25,950 --> 00:01:29,750
That's what the hard drive is there for, for storing files,

28
00:01:29,750 --> 00:01:32,583
and uploaded files are no exception.

29
00:01:33,780 --> 00:01:37,570
Unlike databases, the file system is optimized

30
00:01:37,570 --> 00:01:39,140
for working with files.

31
00:01:39,140 --> 00:01:41,110
And therefore, you should put your files

32
00:01:41,110 --> 00:01:43,260
onto that file system.

33
00:01:43,260 --> 00:01:47,000
And the only thing related to the uploaded file

34
00:01:47,000 --> 00:01:49,220
that should be stored in the database

35
00:01:49,220 --> 00:01:53,730
would then be the path to that stored file.

36
00:01:53,730 --> 00:01:56,430
So you put that file somewhere on the hard drive,

37
00:01:56,430 --> 00:01:59,190
but the path that points to that file,

38
00:01:59,190 --> 00:02:03,780
this path, so this string, this text which it is in the end,

39
00:02:03,780 --> 00:02:06,020
that would be stored in the database

40
00:02:06,020 --> 00:02:09,780
side-by-side with the other related data.

41
00:02:09,780 --> 00:02:12,340
So if you are storing an image for a user,

42
00:02:12,340 --> 00:02:15,140
you would store the username and the email address

43
00:02:15,140 --> 00:02:17,710
and whatever you have in the database,

44
00:02:17,710 --> 00:02:20,840
you would store the image of the user on the hard drive,

45
00:02:20,840 --> 00:02:23,910
and you would store the path pointing to that image

46
00:02:23,910 --> 00:02:26,710
together with the username and the email

47
00:02:26,710 --> 00:02:31,330
in one and the same record or document in the database.

48
00:02:31,330 --> 00:02:34,600
That's how you should handle uploaded files.

49
00:02:34,600 --> 00:02:37,690
Now, for Multer, the implication of what we learned

50
00:02:37,690 --> 00:02:40,950
for storing files and where to store files

51
00:02:40,950 --> 00:02:44,330
is that we wanna tell Multer to store that file

52
00:02:44,330 --> 00:02:47,710
in a specific folder in our project here.

53
00:02:47,710 --> 00:02:50,690
And actually, there wouldn't be a straightforward way

54
00:02:50,690 --> 00:02:54,000
of telling Multer to store a file in a database

55
00:02:54,000 --> 00:02:55,940
because that isn't a good idea.

56
00:02:55,940 --> 00:02:59,410
Still, I wanted to highlight why it isn't a good idea

57
00:02:59,410 --> 00:03:01,830
and show you how you would store files

58
00:03:01,830 --> 00:03:03,633
and the path to the file.

59
00:03:04,690 --> 00:03:05,770
So therefore here,

60
00:03:05,770 --> 00:03:09,210
we have to go back to line four in my case

61
00:03:09,210 --> 00:03:12,760
where we initialized Multer and now tell Multer

62
00:03:12,760 --> 00:03:16,070
where uploaded files should be stored.

63
00:03:16,070 --> 00:03:20,163
And we do this by adding a dest option for destination.

64
00:03:21,110 --> 00:03:24,160
Now we can add a new folder in our project,

65
00:03:24,160 --> 00:03:25,863
for example, images.

66
00:03:27,090 --> 00:03:28,960
And that could be the folder

67
00:03:28,960 --> 00:03:31,960
where the uploaded files should go to.

68
00:03:31,960 --> 00:03:36,470
So then dest would be images like this.

69
00:03:36,470 --> 00:03:39,530
With that, we tell Multer that uploaded files

70
00:03:39,530 --> 00:03:42,380
should go into the images folder.

71
00:03:42,380 --> 00:03:45,623
Of course, it's up to you how you name that folder,

72
00:03:47,270 --> 00:03:51,030
but now Multer will automatically move uploaded files

73
00:03:51,030 --> 00:03:53,420
into that images folder.

74
00:03:53,420 --> 00:03:56,150
And on that file object that we get here,

75
00:03:56,150 --> 00:03:58,640
we will, for example, get the information,

76
00:03:58,640 --> 00:04:02,640
what the full path to the uploaded file is

77
00:04:02,640 --> 00:04:07,640
because the direct file thing here is actually an object

78
00:04:07,780 --> 00:04:11,290
that will give us extra file information,

79
00:04:11,290 --> 00:04:15,273
things like the filename or the path to the file.

80
00:04:16,750 --> 00:04:20,483
So that's what we get here on this req.file object.

81
00:04:22,050 --> 00:04:24,870
And req.body, as mentioned, holds the other data

82
00:04:24,870 --> 00:04:26,343
that was part of the form.

83
00:04:27,440 --> 00:04:29,740
So with that, we now have a setup

84
00:04:29,740 --> 00:04:31,970
where the file should be stored correctly

85
00:04:31,970 --> 00:04:35,150
and we get information about that stored file.

86
00:04:35,150 --> 00:04:37,030
Now to see that all in action,

87
00:04:37,030 --> 00:04:42,030
I will just console.log the uploaded image file here

88
00:04:42,330 --> 00:04:45,563
so that we see which kind of data we get for this file.

89
00:04:46,440 --> 00:04:49,383
And I will console.log the other user data

90
00:04:49,383 --> 00:04:51,223
so that we see what's in there.

91
00:04:53,050 --> 00:04:55,950
And then I'll simply redirect to the starting page

92
00:04:55,950 --> 00:04:58,043
with /nothing like this.

93
00:05:00,080 --> 00:05:02,490
That's for the moment my server side code

94
00:05:02,490 --> 00:05:04,190
for handling the file uploads.

95
00:05:04,190 --> 00:05:06,973
It's not the finished code, but a good first step.

96
00:05:08,520 --> 00:05:10,310
Now we can save everything

97
00:05:12,320 --> 00:05:16,480
and go back to our site here and reload this form,

98
00:05:16,480 --> 00:05:18,340
pick the image again,

99
00:05:18,340 --> 00:05:22,880
enter some username here and click save user

100
00:05:23,980 --> 00:05:25,950
and we are redirected.

101
00:05:25,950 --> 00:05:28,100
I don't see the user data here yet

102
00:05:28,100 --> 00:05:30,690
because we haven't added the logic for this yet,

103
00:05:30,690 --> 00:05:34,283
but here on the backend, we now see some data being logged.

104
00:05:35,180 --> 00:05:37,270
This here is the file data.

105
00:05:37,270 --> 00:05:40,150
That's the other kind of data we got.

106
00:05:40,150 --> 00:05:42,320
Now you see the other data is just an object

107
00:05:42,320 --> 00:05:44,310
with the username as expected.

108
00:05:44,310 --> 00:05:48,320
And for the file data, we got the original filename

109
00:05:48,320 --> 00:05:51,360
as chosen by me for the upload.

110
00:05:51,360 --> 00:05:53,610
And then we got the path to the file

111
00:05:53,610 --> 00:05:57,513
and an automatically assigned filename chosen by Multer.

112
00:05:58,500 --> 00:06:01,520
In images, we see that file.

113
00:06:01,520 --> 00:06:05,610
So Multer automatically gives that file a unique ID

114
00:06:05,610 --> 00:06:09,310
simply to ensure that if you upload multiple files

115
00:06:09,310 --> 00:06:10,480
with the same name,

116
00:06:10,480 --> 00:06:13,403
they don't overwrite each other on the server side.

117
00:06:14,290 --> 00:06:17,670
For example, for Facebook, if you create a profile

118
00:06:17,670 --> 00:06:20,580
and you choose an image called max.jpeg,

119
00:06:20,580 --> 00:06:23,090
it would be pretty bad if another user

120
00:06:23,090 --> 00:06:27,240
with an equally named image would overwrite your image.

121
00:06:27,240 --> 00:06:30,300
That's why you typically wanna rename files

122
00:06:30,300 --> 00:06:32,143
when they arrive on the server.

123
00:06:33,590 --> 00:06:36,580
Now, one thing that's missing here on the filename

124
00:06:36,580 --> 00:06:38,710
is the original extension.

125
00:06:38,710 --> 00:06:42,300
This filename here doesn't have an extension.

126
00:06:42,300 --> 00:06:44,710
We know it's still a JPEG file,

127
00:06:44,710 --> 00:06:47,400
but the extension doesn't signal it.

128
00:06:47,400 --> 00:06:50,520
We know that it is because we uploaded a JPEG file.

129
00:06:50,520 --> 00:06:53,743
And as soon as we add .jpeg here,

130
00:06:54,980 --> 00:06:56,950
we would be able to view it as such,

131
00:06:56,950 --> 00:06:59,040
even here in Visual Studio Code.

132
00:06:59,040 --> 00:07:01,623
But by default, this extension was missing.

133
00:07:02,740 --> 00:07:03,573
Now, it would be nice

134
00:07:03,573 --> 00:07:06,610
if we could keep the extension of our file here.

135
00:07:06,610 --> 00:07:07,850
And to achieve this,

136
00:07:07,850 --> 00:07:10,400
we have to change the configuration here

137
00:07:10,400 --> 00:07:13,630
and move away from just specifying the destination

138
00:07:13,630 --> 00:07:16,310
to actually telling Multer in detail

139
00:07:16,310 --> 00:07:18,713
how the uploaded file should be stored.