WEBVTT 00:03.730 --> 00:04.210 Hey there. 00:04.210 --> 00:05.140 Everyone is here. 00:05.140 --> 00:10.360 And in this video we're going to work with the image, upload a lot of people get afraid of as soon 00:10.360 --> 00:15.070 as there is some file being uploaded or image being uploaded and they found all the time it's confusing 00:15.070 --> 00:18.580 that how to handle the images and I get you it's totally fine. 00:18.580 --> 00:23.170 It's totally okay because images are by default, not a part of the express itself. 00:23.200 --> 00:28.390 Express don't know how to handle these kinds of binary data, images, PDF, whatever that's coming 00:28.390 --> 00:28.750 up. 00:28.780 --> 00:32.950 Usually there are some other tools that we have to install to handle that. 00:33.070 --> 00:34.780 One of them is quite famous. 00:34.780 --> 00:39.760 One You might have heard about this from me or from some other instructor, but there is no shortage 00:39.760 --> 00:44.680 of such tools and the reality is that we need to install such kind of a tool up here. 00:44.680 --> 00:46.390 So let's go ahead and analyze this. 00:46.390 --> 00:48.850 We'll go up here back onto the NPM. 00:48.850 --> 00:53.650 And one of the common ones that you are going to see, of course, other than express is actually this 00:53.650 --> 00:55.660 one express file upload. 00:55.660 --> 00:59.830 So this is the one and let's go ahead, give it a second. 00:59.830 --> 01:02.260 And you can see the downloads are getting increased. 01:02.260 --> 01:07.360 This is fairly a new package, not too much new, but it's fairly new compared to others. 01:07.360 --> 01:12.670 It just got published nine months ago, but it's really, really one of the fantastic and easiest one 01:12.670 --> 01:13.780 to handle all of that. 01:13.810 --> 01:16.240 Now, it doesn't come up with too much of a requirement. 01:16.240 --> 01:17.830 The usage is pretty simple. 01:17.830 --> 01:22.660 What are you going to do is as soon as you see something in the post request on any of the route, it 01:22.660 --> 01:24.790 will give you access through request files. 01:24.960 --> 01:30.370 So just like you get requested body, you get request files dot whatever the file is being uploaded. 01:30.370 --> 01:32.110 So in this case the foo is getting uploaded. 01:32.110 --> 01:33.670 So that is what we are going to get. 01:33.670 --> 01:39.550 And again, this foo is responsible for whatever you are naming it at the type of defining in the front 01:39.550 --> 01:40.570 in the forms. 01:40.570 --> 01:42.940 So remember the name user name, name, email. 01:42.940 --> 01:44.410 Yeah, that's exactly one here. 01:44.560 --> 01:46.600 You can also upload a multiple of them. 01:46.600 --> 01:49.810 They give you even the example projects and basic upload all of that. 01:49.810 --> 01:54.550 If you click on this example project, they'll give you the even the source code and remember the name 01:54.550 --> 01:55.630 I was talking about. 01:55.630 --> 01:58.330 This is exactly the name, the sample name, file name. 01:58.330 --> 02:03.970 So this is I was talking about and the submit value is upload and all of that and then simply come up 02:03.970 --> 02:08.770 here and you can go ahead and request this just like this request files dot sample file. 02:08.950 --> 02:09.780 Pretty simple. 02:09.800 --> 02:10.870 Couldn't be much more. 02:11.020 --> 02:15.160 Now what you do after the image being uploaded, that's totally up to you. 02:15.160 --> 02:16.930 And what is the flow of your application? 02:16.930 --> 02:21.280 You want to move it into just a folder and store the entire path into the database? 02:21.280 --> 02:21.730 Totally. 02:21.730 --> 02:22.390 Your call. 02:22.420 --> 02:29.110 Maybe you want to send it to Firebase s Storage Services or Cloud, and that's up to you however you 02:29.110 --> 02:30.130 want to handle that. 02:30.670 --> 02:34.870 In this case, we are going to just store that into a folder because we are just getting started. 02:34.870 --> 02:36.070 So this is all what we need. 02:36.070 --> 02:39.940 Let's go back and see the package and install that most importantly. 02:40.180 --> 02:45.370 So come on, go back and we're going to go ahead and copy this one because that's exactly what we need. 02:45.370 --> 02:47.350 Let's open up this one here. 02:47.680 --> 02:52.840 Close this server, paste this up and let's install, express, file, upload. 02:52.840 --> 02:57.550 And again, the functionality of multi and any other such packages is really, really similar. 02:57.550 --> 03:01.120 I found that this one is probably the easiest one of all. 03:01.180 --> 03:03.700 So how we're going to get started, really simple. 03:03.700 --> 03:06.250 As soon as you install this package, we need to actually grab it. 03:06.250 --> 03:11.380 So we are going to go at the very top and let's call this one as simply file upload. 03:11.890 --> 03:16.150 So file upload and you already know from where this is going to come in. 03:16.150 --> 03:19.960 So require which is going to be express file upload. 03:19.960 --> 03:22.750 Now you have this file upload object as of this. 03:22.750 --> 03:27.910 And again, as I told you, in case you want to handle any of the things, whether it's JSON, request, 03:27.910 --> 03:30.970 body or anything, we need to use that as a middleware. 03:30.970 --> 03:35.620 So similarly, we are going to be using that similarly so express our JSON was previously. 03:35.620 --> 03:40.480 Now we have copied this one and instead we'll be saying that, hey, if any file upload comes up, you 03:40.480 --> 03:43.600 just handle that and provide me as request files. 03:43.600 --> 03:44.260 There we go. 03:44.260 --> 03:46.060 And it's going to do all the magic in between. 03:46.060 --> 03:47.920 I don't have to worry about any of that. 03:48.190 --> 03:52.090 Now, moving on, once this is all done, all I have to do is upload my file. 03:52.090 --> 03:54.940 So how my strategy is going to be there for it. 03:55.240 --> 03:57.640 Let's go ahead and of course, query. 03:57.640 --> 03:58.480 Yeah, this is fine. 03:58.480 --> 04:00.160 So let's go ahead and duplicate this one. 04:02.210 --> 04:04.580 First and foremost, this is going to be a post request. 04:04.580 --> 04:05.920 So I'm going to go ahead and post. 04:05.930 --> 04:07.940 I want to just store all of this. 04:07.940 --> 04:11.090 Let's call this one as simply course upload. 04:11.090 --> 04:15.170 Now I will not send it to Cloud Ordinary or or anywhere else. 04:15.170 --> 04:17.120 I'll just store that into a folder. 04:17.120 --> 04:19.010 Let's call this one as images. 04:19.460 --> 04:21.290 That's where I'm going to be keeping it. 04:21.410 --> 04:23.000 I accidentally created a file. 04:23.120 --> 04:24.230 Don't want to do that. 04:24.230 --> 04:25.700 Let's delete that. 04:26.600 --> 04:27.550 Move to trash. 04:27.560 --> 04:29.180 I want to create a folder. 04:29.630 --> 04:30.950 So images. 04:31.160 --> 04:33.230 So all of my images will go up here. 04:33.810 --> 04:37.590 Okay, let's go ahead and remove all of this and see how this is going to work on. 04:37.610 --> 04:40.850 So first, I'm going to go ahead and grab this file. 04:40.850 --> 04:42.870 So I'm going to call this one as const file. 04:42.890 --> 04:45.710 Feel free to name it anything, sample, file, file, whatever. 04:45.710 --> 04:48.800 But make sure that in the front end also you're calling it with the same name. 04:48.800 --> 04:54.140 So I'm going to go ahead and call request files dot whatever the name of your file in this case, I'm 04:54.140 --> 04:57.140 going to just call it as file or sample file, whatever you like. 04:57.160 --> 04:57.560 Set. 04:57.680 --> 05:02.390 Once this is being done, now, after that, you have to simply say that where you want to move this 05:02.390 --> 05:02.920 file. 05:02.930 --> 05:04.910 So let's go ahead and change its path. 05:04.910 --> 05:07.130 So I'm going to call this one as simply part. 05:07.250 --> 05:09.710 And again, this is also mentioned in the documentation. 05:09.710 --> 05:14.960 So there I'm going to simply say that give me the directory name and this will give you the project 05:14.960 --> 05:17.900 directory name or the absolute path of the project. 05:17.900 --> 05:24.320 And then on top of that, I'm going to add up my path of slash images inside this. 05:25.370 --> 05:29.210 I want to rename this in this case, there are a lot of ways how you can rename this. 05:29.210 --> 05:34.700 You can generate a unique ID, you can use packages like UUID, which can give you some unique name. 05:34.700 --> 05:37.710 Or in this case, we are going to go ahead for a hack, which is DOT. 05:37.790 --> 05:40.070 Now you're going to see this a lot of places. 05:40.070 --> 05:43.910 And further down the road, I'm going to go ahead and add a JPEG onto this. 05:43.940 --> 05:49.010 It is not an ideal way of storing the images that you are changing every extension to just JPEG. 05:49.010 --> 05:51.680 But this actually saves a lot of things on server. 05:51.920 --> 05:58.490 There are files, specific modules which helps you to shrink the file, lower down the quality, all 05:58.490 --> 05:58.790 of that. 05:58.790 --> 06:01.280 But that's going to go too much as of now. 06:01.580 --> 06:01.880 Okay. 06:01.880 --> 06:07.760 Once this is all being done now, all the things that we have to do is use this file again that we have 06:07.760 --> 06:12.440 created from request file and let's use the MOV command over that. 06:12.440 --> 06:13.850 It takes two parameter. 06:13.940 --> 06:17.030 It simply says, hey, just give me the path and I'll move the file there. 06:17.150 --> 06:23.720 Now if there are errors, you can handle the errors like this so we can go like this and we can simply 06:23.720 --> 06:25.670 say Rez dot send. 06:25.700 --> 06:30.290 Of course I haven't handled the error here, so I'm going to go ahead and pass on a value like true. 06:30.290 --> 06:31.310 Just as a boolean. 06:31.520 --> 06:33.380 Of course I haven't handled the error here. 06:33.380 --> 06:37.760 I should be saying something like if there are errors and false, if there are no errors, then send 06:37.760 --> 06:38.180 true. 06:38.180 --> 06:39.590 But I believe you can do that. 06:39.590 --> 06:41.410 It's a simple final statement. 06:41.540 --> 06:43.910 Okay, this is the basics. 06:43.910 --> 06:47.240 And again, you can store the center path into the database and all of that. 06:47.240 --> 06:48.290 That's up to you. 06:48.470 --> 06:54.680 Let's go ahead and save this one and I'm going to go ahead and now let's go ahead and write documentation 06:54.680 --> 06:57.710 for this entire path so that we can actually test this out. 06:57.710 --> 07:03.050 So I'm going to go into the documentation and I will copy this course query because that's the last 07:03.050 --> 07:03.950 one we got. 07:04.580 --> 07:06.740 Let's go ahead and paste this one. 07:08.250 --> 07:08.850 Okay. 07:08.850 --> 07:11.400 So let's hit enter. 07:11.430 --> 07:12.000 There we go. 07:12.570 --> 07:14.340 Now, this one, I guess is cause upload. 07:14.340 --> 07:18.480 So let's copy this one and paste it up here cause upload. 07:18.510 --> 07:20.520 Now, obviously this is not a get request. 07:20.520 --> 07:21.750 This is going to be post. 07:21.750 --> 07:23.340 I'll still combine it with the string. 07:23.340 --> 07:26.160 There is no such need of doing that, but I'll still do it. 07:26.310 --> 07:31.290 Now in the summary I'll say uploading course. 07:31.290 --> 07:32.850 Image or image. 07:32.850 --> 07:33.930 Yeah, just like that. 07:34.170 --> 07:39.720 Now in here we are going to the parameters are not required, so I'm going to go ahead and remove this 07:39.720 --> 07:40.680 entirely. 07:41.220 --> 07:47.190 What we require is this image always go through the body and that's why we call it as multipart upload 07:47.190 --> 07:47.850 as the form. 07:47.850 --> 07:49.200 So let's go ahead and do that. 07:49.200 --> 07:52.530 We're going to say, hey, I'm sending you something in the request body. 07:52.830 --> 07:56.490 And then I have to mention what kind of content you are sending me. 07:56.490 --> 08:04.620 The content that I'm sending you is not application JSON, but rather this is a part of multipart slash 08:04.620 --> 08:05.550 form and data. 08:05.550 --> 08:09.900 And that's why you're going to see that a lot of React application or Angular application instead of 08:09.900 --> 08:15.900 sending you just state and everything they use and change the things into the form data there so they 08:15.900 --> 08:17.190 create a form data and all of that. 08:17.190 --> 08:22.140 That's exactly reason because you cannot send images in the JSON, you can send the image path, but 08:22.140 --> 08:23.100 it's complex. 08:23.100 --> 08:25.740 Rather it is better to send it in the form data. 08:26.550 --> 08:28.680 Now what is going to be the schema of that? 08:28.770 --> 08:30.980 That is the important part, the schema. 08:30.990 --> 08:32.420 Let's go ahead and say type. 08:32.430 --> 08:35.070 Now here, the type doesn't change as the form data. 08:35.070 --> 08:39.100 The type can still remain as an object because you send multiple of the information. 08:39.120 --> 08:41.970 Now here, I'm going to go ahead and say the properties. 08:43.260 --> 08:45.510 Property's most important thing. 08:45.510 --> 08:48.470 You can send your IDs as strings and name and all of that. 08:48.480 --> 08:53.130 One of the property that is important for me is file and make sure I'm calling it as file. 08:53.130 --> 08:56.370 If you call it a sample file, go ahead and call it a sample file here. 08:56.610 --> 09:04.020 The file is going to be of type string and most importantly, format. 09:04.020 --> 09:08.950 We haven't written the format so far because we didn't need it, but this time the format is binary. 09:08.970 --> 09:15.480 Now, as soon as you save this, the data, the schema, we're not returning the schema as of this type, 09:16.020 --> 09:18.810 but I'm not going to be worried about any kind of response. 09:18.810 --> 09:20.980 You can go ahead and write that on your own. 09:21.000 --> 09:23.250 I'm going to go ahead and in fact, remove this. 09:23.250 --> 09:24.930 And in fact, I'm going to remove this part. 09:24.930 --> 09:27.990 We have already discussed this one, so shouldn't be much more of a deal. 09:28.590 --> 09:31.620 Okay, let's save this and see how many errors we have made so far. 09:31.620 --> 09:35.140 And let's go ahead and open up my browser. 09:35.160 --> 09:35.850 There we go. 09:37.020 --> 09:41.490 So I got you.I hit a reload and this says We have seen. 09:41.700 --> 09:46.050 So this is a course upload up here and notice here it says request body. 09:46.050 --> 09:50.220 Yes, you can mention your IDs and probably you want to pass on further on information. 09:50.220 --> 09:56.640 Maybe it's a user registration form so you can send more information notice here it says multipart form 09:56.640 --> 09:57.600 data this time. 09:57.600 --> 09:59.610 So I'm going to go ahead and try it out. 09:59.850 --> 10:01.560 It says, send me value. 10:01.560 --> 10:02.640 Please don't send that. 10:02.640 --> 10:05.400 I'm going to go ahead and choose an image for here now. 10:06.860 --> 10:12.080 So I'm going to go ahead and choose this image, which is an image of a go file. 10:12.230 --> 10:16.470 And I'm going to go ahead and execute this one as soon as I execute this one. 10:16.490 --> 10:22.460 The response body gives me a true and I can also verify here that the image actually is up here, which 10:22.460 --> 10:23.540 is, of course, a go image. 10:23.540 --> 10:24.380 So there we go. 10:24.410 --> 10:29.990 Told you the handling part of the image is not of a big deal and you can actually do a console log of 10:29.990 --> 10:34.700 the part here, can store that in the database because we are storing that in the folder itself. 10:34.700 --> 10:37.960 Or you can use some services like Cloudera, a W. 10:38.000 --> 10:41.330 S Bucket or maybe firebase or something else. 10:41.330 --> 10:45.770 There is no shortage of such services and handling from here is actually pretty easy. 10:45.770 --> 10:50.000 So told you it's really easy to handle file and let's go ahead and catch up in the next video.