1
00:00:02,120 --> 00:00:05,200
Now that's it for this course section.

2
00:00:05,200 --> 00:00:07,490
We had a look at file uploads

3
00:00:07,490 --> 00:00:10,590
and we learned about this input type file,

4
00:00:10,590 --> 00:00:13,550
which we can add to our HTML elements

5
00:00:13,550 --> 00:00:15,773
to give the user a file picker.

6
00:00:16,690 --> 00:00:18,630
We learned how we can configure it

7
00:00:18,630 --> 00:00:21,180
to only accept certain files.

8
00:00:21,180 --> 00:00:24,800
And we learned that we have to configure our form element

9
00:00:24,800 --> 00:00:27,530
and add this enctype attribute

10
00:00:27,530 --> 00:00:30,130
and set it to multipart form data

11
00:00:30,130 --> 00:00:33,683
as soon as we have at least one file in the form,

12
00:00:35,060 --> 00:00:38,550
then this form with that file can be submitted.

13
00:00:38,550 --> 00:00:41,300
And then we have to handle it on the server side,

14
00:00:41,300 --> 00:00:44,420
which we can do with a middleware like Multer.

15
00:00:44,420 --> 00:00:47,100
Multer can be configured as you learned

16
00:00:47,100 --> 00:00:50,110
so that you have full control over the path

17
00:00:50,110 --> 00:00:53,663
where the uploaded files are stored and the filename.

18
00:00:54,500 --> 00:00:56,440
And that's important.

19
00:00:56,440 --> 00:01:00,820
Files are stored on the hard drive in your file system.

20
00:01:00,820 --> 00:01:03,070
You don't store them in databases.

21
00:01:03,070 --> 00:01:05,720
Instead, it's the path to a file

22
00:01:05,720 --> 00:01:08,010
that you store in a database.

23
00:01:08,010 --> 00:01:10,803
That is what we're doing down here in this post route.

24
00:01:11,670 --> 00:01:13,690
We're inserting a new document

25
00:01:13,690 --> 00:01:16,070
and it would be the same for SQL.

26
00:01:16,070 --> 00:01:18,140
There, we also don't store the file,

27
00:01:18,140 --> 00:01:21,410
but instead, we insert data with some extra data

28
00:01:21,410 --> 00:01:24,703
like the username and then a path to the file.

29
00:01:26,030 --> 00:01:29,000
Then we can, of course, fetch that data when we need it

30
00:01:29,000 --> 00:01:32,710
and we can then, of course, also use it in our templates

31
00:01:32,710 --> 00:01:36,380
to output that image if that is our plan.

32
00:01:36,380 --> 00:01:39,830
Of course, not all uploaded files have to be output,

33
00:01:39,830 --> 00:01:43,290
but a lot of them do and that's how you can do that,

34
00:01:43,290 --> 00:01:45,840
at least regarding the template.

35
00:01:45,840 --> 00:01:48,020
It's always important to keep in mind

36
00:01:48,020 --> 00:01:50,140
that you need to serve your files

37
00:01:50,140 --> 00:01:53,450
if you wanna serve them and show them to your users.

38
00:01:53,450 --> 00:01:54,820
If you don't wanna do them,

39
00:01:54,820 --> 00:01:57,010
of course, you don't have to serve them.

40
00:01:57,010 --> 00:02:00,690
But if you have images that should be visible to all users,

41
00:02:00,690 --> 00:02:03,950
you have to statically serve your files.

42
00:02:03,950 --> 00:02:06,410
Here, I'm using this middleware like this

43
00:02:06,410 --> 00:02:09,380
with that filter path here in front of it

44
00:02:09,380 --> 00:02:14,370
so that requests to /images/filename work

45
00:02:14,370 --> 00:02:16,860
and don't go into the void.

46
00:02:16,860 --> 00:02:18,290
And last but not least,

47
00:02:18,290 --> 00:02:21,590
we also had a look at previewing files.

48
00:02:21,590 --> 00:02:24,600
That's not something that's built into the browser,

49
00:02:24,600 --> 00:02:28,370
not a core HTML feature, but it's easy to implement

50
00:02:28,370 --> 00:02:31,600
with a couple of lines of browser side JavaScript

51
00:02:31,600 --> 00:02:33,663
as you see here with this example.

52
00:02:34,620 --> 00:02:36,070
And that's it for this section.

53
00:02:36,070 --> 00:02:38,120
That's how we can add file upload.

54
00:02:38,120 --> 00:02:39,690
And since that is a feature

55
00:02:39,690 --> 00:02:42,540
you typically do add to a lot of websites,

56
00:02:42,540 --> 00:02:44,870
that's definitely something you should know.

57
00:02:44,870 --> 00:02:46,883
And now you do, I guess.