1
00:00:07,960 --> 00:00:09,220
Welcome back.

2
00:00:09,250 --> 00:00:12,790
Let's get started with the file upload.

3
00:00:13,060 --> 00:00:23,290
So by default, express does not support file upload unless we configure Express to do so.

4
00:00:23,560 --> 00:00:33,400
And lucky for us, we are going to use a package core motor and this package was created or developed

5
00:00:33,400 --> 00:00:36,760
by the team who developed Xpress.

6
00:00:36,760 --> 00:00:41,200
So let's go ahead and install this package called Motor.

7
00:00:41,350 --> 00:00:46,780
You can see the weekly download, it tells you how popular this package is.

8
00:00:46,780 --> 00:00:51,630
So I'll click on this one and back to my terminal.

9
00:00:51,700 --> 00:00:59,530
Let me go ahead and install the package so I'll shut down my server, click the terminal, paste it

10
00:00:59,530 --> 00:01:00,730
and hit enter.

11
00:01:00,760 --> 00:01:03,940
Now Mota has finished installing.

12
00:01:03,970 --> 00:01:06,880
Let me go ahead and run the server.

13
00:01:07,150 --> 00:01:10,540
So let's go ahead and configure our server.

14
00:01:10,540 --> 00:01:21,070
To use motor, we need to bring in the package that is cost motor which is equal to required.

15
00:01:21,770 --> 00:01:22,610
Mortar.

16
00:01:22,910 --> 00:01:29,870
Before we continue, let's see if by default experts support file upload.

17
00:01:29,930 --> 00:01:35,840
So let's locate the route where we want to make a request to upload file.

18
00:01:35,840 --> 00:01:37,640
And this is the route.

19
00:01:37,880 --> 00:01:42,350
Let's remove this render here and make use of JSON.

20
00:01:42,350 --> 00:01:47,750
And we say that file uploaded successfully.

21
00:01:51,200 --> 00:01:55,160
All right, so let's get back to postmen to test this endpoint.

22
00:01:55,280 --> 00:01:59,210
And I've created a collection called file upload.

23
00:01:59,210 --> 00:02:04,970
And inside I have one request called upload, which is slash upload.

24
00:02:05,000 --> 00:02:10,840
Now to be able to upload a file from Postman, let's see the process.

25
00:02:10,850 --> 00:02:17,300
The first step is click on body and then under this dropdown select form data.

26
00:02:17,450 --> 00:02:27,380
And for this one we have key value and description and a key select file and the value is going to be

27
00:02:27,380 --> 00:02:29,990
the image that we want to upload.

28
00:02:29,990 --> 00:02:33,860
So here I'll click open before I save it.

29
00:02:33,860 --> 00:02:35,840
Let's get back to the root.

30
00:02:35,840 --> 00:02:44,300
And inside the root we have access to the file the user is uploading on request dot file.

31
00:02:44,300 --> 00:02:52,430
So let's go ahead and console.log that if we are going to see the file now save it and back to postman

32
00:02:52,430 --> 00:02:55,460
hit send and let's check the terminal.

33
00:02:55,490 --> 00:03:03,440
Let me check the response where file upload it and on the terminal you can see that it is undefined.

34
00:03:03,440 --> 00:03:09,500
That's why we say that by default Express does not support file upload.

35
00:03:09,500 --> 00:03:15,650
But with the help of this package called Morta, we can receive file upload.

36
00:03:15,650 --> 00:03:20,300
So now let's configure motor before my roots.

37
00:03:20,300 --> 00:03:25,220
Let's go ahead and have a beautiful comment and says that configure.

38
00:03:27,910 --> 00:03:30,580
Morton and here you go.

39
00:03:30,610 --> 00:03:36,040
I will bring in the mortar package as a function, and then I'll pass in an object.

40
00:03:36,040 --> 00:03:39,130
And this one contains some configuration.

41
00:03:39,640 --> 00:03:44,350
The first property is called Dest, which means destination.

42
00:03:44,530 --> 00:03:46,900
This one determines which folder.

43
00:03:46,900 --> 00:03:51,400
We want to save the files and we can provide any name here.

44
00:03:51,430 --> 00:03:55,960
Let's say that we want to save the images inside the images folder.

45
00:03:56,200 --> 00:03:58,820
If I save it, I'm going to create a folder.

46
00:03:58,840 --> 00:04:00,070
Now let's see.

47
00:04:00,820 --> 00:04:05,380
And you can see that it has created a folder called Images.

48
00:04:05,410 --> 00:04:09,350
Let's say that you want to keep the images inside the public.

49
00:04:09,370 --> 00:04:16,000
Then you provide public and first large images when I save it.

50
00:04:16,029 --> 00:04:20,260
Now, inside the public, we have the images folder.

51
00:04:20,829 --> 00:04:22,610
So the choice is yours.

52
00:04:22,630 --> 00:04:28,060
Let me remove this one and keep my images inside the public folder.

53
00:04:28,090 --> 00:04:30,610
Now let's continue to configure.

54
00:04:30,820 --> 00:04:38,140
Next is our assign the response coming back from quarter to a variable called upload.

55
00:04:38,350 --> 00:04:45,880
Now any route where I want to receive file upload, I'm going to pass it as a second element or as a

56
00:04:45,880 --> 00:04:46,600
module.

57
00:04:46,630 --> 00:04:51,240
And this is a route, so I'll pass in before my handler.

58
00:04:51,250 --> 00:04:53,200
So I'm going to be upload.

59
00:04:53,200 --> 00:05:00,400
And for this one you need to tell daughter that you want to receive multiple upload or single upload.

60
00:05:00,400 --> 00:05:06,580
For the meantime, let's support single upload and as a function call and comma.

61
00:05:06,580 --> 00:05:14,020
Here, the argument single takes going to be the file name and I'll show you in just a second.

62
00:05:14,200 --> 00:05:15,340
It can be anything.

63
00:05:15,370 --> 00:05:21,220
It can be a profile, picture or image or images, but I'll make it as file.

64
00:05:21,580 --> 00:05:24,340
Next is back to Postman.

65
00:05:24,340 --> 00:05:32,290
Now that I have configured my route to receive file upload, let's see how we can pass in the upload.

66
00:05:32,320 --> 00:05:33,820
Now have a look.

67
00:05:33,970 --> 00:05:40,810
You can see that under key we have file and provide the file name.

68
00:05:40,810 --> 00:05:44,980
What you see here must be the same as this one.

69
00:05:45,070 --> 00:05:49,270
So let me provide a file now.

70
00:05:49,300 --> 00:05:53,290
Next is let's go ahead and hit st.

71
00:05:53,650 --> 00:05:57,880
You can see I got motor error meaning on expected field.

72
00:05:57,880 --> 00:06:05,530
This means that the field name I provided, which is five file, is not on the single, so I need to

73
00:06:05,530 --> 00:06:07,630
remove the other one.

74
00:06:09,920 --> 00:06:10,550
As that.

75
00:06:10,550 --> 00:06:13,220
So now let me go ahead and hit send.

76
00:06:13,250 --> 00:06:15,100
Now I get the response.

77
00:06:15,110 --> 00:06:17,180
Now back to my terminal.

78
00:06:17,210 --> 00:06:18,620
Now have a look.

79
00:06:18,650 --> 00:06:25,970
And indeed we have the file being uploaded with one line of code with motor.

80
00:06:26,000 --> 00:06:27,830
We are able to get that.

81
00:06:27,830 --> 00:06:35,030
And you can see with that package we are able to get the filename, the original name, the encoding,

82
00:06:35,060 --> 00:06:38,180
the mime type destination and many more.

83
00:06:38,300 --> 00:06:47,360
So if I look at the folder that is public and images, you can see that I have the image here, but

84
00:06:47,360 --> 00:06:50,390
by default it has an on the extension.

85
00:06:50,390 --> 00:06:55,650
So if we right click and then we add extension, copy and Jean.

86
00:06:55,670 --> 00:07:00,290
Now you can see that I have the image that I uploaded.

87
00:07:00,290 --> 00:07:07,220
So this is a basic configuration that we can do to allow express to support file upload.

88
00:07:07,460 --> 00:07:15,080
Next is we need to do what is called validation, meaning that if a user is trying to upload a file

89
00:07:15,080 --> 00:07:19,520
more than a size that we specify, we need to throw an error.

90
00:07:19,520 --> 00:07:23,630
So let's see how we can implement validation in the next video.