WEBVTT 00:03.910 --> 00:04.780 Hey there, everyone. 00:04.880 --> 00:05.350 They share. 00:05.350 --> 00:07.150 And welcome to another video. 00:07.180 --> 00:12.280 In this video, we're going to handle how to handle the post forms as well as the images as well. 00:12.310 --> 00:14.580 We won't be sending the images to cloud yet. 00:14.590 --> 00:16.840 That will come up into a separate video itself. 00:17.110 --> 00:22.330 Rather, in this one, we just want to see that how to handle files as well as just the post form. 00:22.330 --> 00:24.520 And again, we have seen all the nitty gritty details. 00:24.520 --> 00:30.070 And as as I said, the post form is much, much reliable as compared to how data comes and it always 00:30.070 --> 00:31.210 comes in request or body. 00:31.210 --> 00:32.770 So you don't need to worry about that. 00:32.770 --> 00:38.020 But some things we need to worry about is this input field has some of the properties like name or not. 00:38.020 --> 00:40.300 That of course comes into the picture here as well. 00:40.300 --> 00:42.640 So we need to say, hey, this one is bringing in first name. 00:42.640 --> 00:47.320 Remember, I'm into the post farm eggs, the white tile is there just to highlight that part. 00:47.320 --> 00:51.760 And similarly, we are going to say that in this one input field, we are going to have a name here 00:51.760 --> 00:54.190 as well, which is last name. 00:54.190 --> 00:59.170 So that's all pretty much it now where this phone will go, of course, we need to provide a method 00:59.170 --> 00:59.770 as well. 00:59.770 --> 01:03.940 This method in this case is post and what action you are taking in. 01:03.940 --> 01:06.310 So we need to verify where the action needs to go. 01:06.310 --> 01:09.250 And so far as you can see, we have these forms for rendering. 01:09.250 --> 01:10.810 So these are the basic ones. 01:10.810 --> 01:14.260 We have the form for my get, but we don't have anything like my post. 01:14.260 --> 01:16.840 So obviously it's time to just go ahead and grab one. 01:16.840 --> 01:20.590 So let's go ahead and say, Hey, this time this will be my post. 01:20.590 --> 01:22.660 So let's go ahead and change that part. 01:22.960 --> 01:28.000 My post again, nothing much of a difference that is we are making we are just sending request or body 01:28.000 --> 01:34.750 and we want to see that how it behaves into the postman as well as into this templating engine as well. 01:34.870 --> 01:38.050 So again, let's go ahead and say slash my post. 01:38.980 --> 01:39.320 Okay. 01:39.460 --> 01:42.940 So we are just dumping down all the information that we probably need. 01:42.940 --> 01:45.520 So let's go ahead and see into the this form. 01:45.520 --> 01:48.970 And let me just quickly check where this form is rendering my post form. 01:49.900 --> 01:50.740 Yep, that's it. 01:50.740 --> 01:52.180 Let's go ahead and save this one. 01:52.180 --> 01:54.580 And this time we want to go to the my post form. 01:54.580 --> 01:57.250 So we're going to go ahead and save my post form. 01:57.460 --> 01:58.600 This is the post form. 01:58.600 --> 02:01.240 Let's go ahead and send Jim. 02:03.350 --> 02:06.110 Jim rocks again. 02:06.110 --> 02:07.210 This is password again. 02:07.220 --> 02:08.870 It shouldn't be password like that. 02:09.230 --> 02:10.550 I really want to change that. 02:10.560 --> 02:12.680 I want to show you that all information is there. 02:12.680 --> 02:14.000 So I'm going to go back up here. 02:14.000 --> 02:16.580 Yes, I know this is too much, but I'll still change this one. 02:16.820 --> 02:18.920 There should be text. 02:19.430 --> 02:20.960 Save that everything. 02:20.960 --> 02:22.670 We don't want to hide any information right now. 02:22.670 --> 02:25.280 You can just change that into the password format and that's it. 02:25.280 --> 02:28.580 But still, I want to make everything visible as of now. 02:28.610 --> 02:32.480 So let's go ahead and say Jim can be better. 02:32.630 --> 02:34.130 Jim Rocks. 02:34.760 --> 02:35.390 There we go. 02:35.390 --> 02:40.310 And if I go ahead and hit the submit, it says, hey, cannot post slash my post. 02:40.310 --> 02:42.170 So what is going on wrong in this case? 02:42.170 --> 02:47.540 Why it is not able to handle slash my post that is obviously probably I have done something wrong up 02:47.540 --> 02:47.780 here. 02:47.780 --> 02:53.210 So it says, hey, this is my post and it says, hey, this is a get type, so it should be a post type. 02:53.210 --> 02:54.500 Again, these are common errors. 02:54.500 --> 02:55.700 You will also be getting them. 02:55.700 --> 02:57.230 That's why I'm not skipping them up. 02:57.230 --> 02:58.070 You need to see that. 02:58.070 --> 02:59.450 How to trace these as well. 02:59.450 --> 03:00.980 As well as how to handle them. 03:00.980 --> 03:02.300 Let's go back up here. 03:02.300 --> 03:05.030 Hit a reload one more time and give it a try one more time. 03:05.030 --> 03:08.330 Jim Rocks, let's go ahead and hit submit. 03:08.330 --> 03:11.510 And we are seeing that the first name and the last name is coming in. 03:11.510 --> 03:15.470 Okay, but we are not yet satisfied because that's how happened in the last one also. 03:15.470 --> 03:20.270 So this is all good, but can I do the same thing into the post request into this form as well? 03:20.270 --> 03:24.740 Let's go ahead and change the post and we're going to go ahead and say, hey, now, if I directly receive 03:24.740 --> 03:28.730 the my post, will I be able to send this one directly up here? 03:28.730 --> 03:31.910 Let's go ahead and hit the send and notice we are again getting the name. 03:31.910 --> 03:33.950 So whatever we are sending, we are receiving it back. 03:33.950 --> 03:35.360 That is absolutely nice. 03:35.360 --> 03:38.150 And that's why I say post forms are much more reliable. 03:38.180 --> 03:38.660 Yes. 03:38.660 --> 03:43.520 Get are also reliable in majority of the case you'll be anyways using React or Angular or something 03:43.520 --> 03:44.180 like that. 03:44.180 --> 03:44.700 Okay. 03:44.750 --> 03:45.770 A little bit more. 03:46.130 --> 03:50.150 Now we want to handle files as well, so we haven't worked through with the file so far. 03:50.150 --> 03:52.670 So let's go ahead and get a copy of this one. 03:52.670 --> 03:55.400 So I'm going to go ahead and just make a copy of this one. 03:55.400 --> 04:00.680 Now, this time this is a type of file and the name should be definitely different. 04:00.680 --> 04:03.620 So we're going to go ahead and call this one as sample file. 04:03.650 --> 04:05.210 Seems like a good name to me. 04:05.480 --> 04:08.000 And again, we need to change this for as well. 04:08.000 --> 04:10.940 It is a good thing you don't need to properly change this one. 04:10.940 --> 04:14.780 It is not required in case you are going for the accessibility. 04:14.810 --> 04:16.610 Absolutely 100% do it. 04:16.610 --> 04:18.860 But in this case, you are just testing out the stuff. 04:19.160 --> 04:20.750 Okay, let's go ahead and go to index. 04:20.750 --> 04:26.360 Save this so that it reloads everything for me and I'm going to go back onto this form, hit a reload 04:26.360 --> 04:27.110 and there we go. 04:27.110 --> 04:31.730 Now I can choose a media file as well, but can I just go ahead and work on with the media file as it 04:31.730 --> 04:32.150 is? 04:32.540 --> 04:34.850 Probably not because you have already seen that. 04:34.850 --> 04:35.210 Why? 04:35.210 --> 04:36.980 I cannot go ahead and do this. 04:36.980 --> 04:39.350 Just go back up here into the index. 04:39.350 --> 04:43.640 We haven't set a middleware for handling the files, so let's go ahead and do this. 04:43.640 --> 04:47.600 Let's go ahead and first check the package JSON, yes, express file upload is installed. 04:47.600 --> 04:48.770 So that is a good thing. 04:48.770 --> 04:50.420 Let's go ahead and bring this up. 04:51.200 --> 04:58.280 So I'm going to go ahead and say const file upload that is going to come form require there should be 04:58.280 --> 04:59.270 super easy for you. 04:59.270 --> 05:04.940 Now I guess we have done this so many times and we're going to go ahead and use this one here as well. 05:04.940 --> 05:11.660 So app dot use and we are going to say file upload and that's it. 05:13.700 --> 05:15.050 So now this is all good. 05:15.050 --> 05:17.480 Now we should be able to see the file upload as well. 05:17.480 --> 05:21.320 Let's go ahead and dump it down into some of the method, which is the post method. 05:21.350 --> 05:25.520 I don't want to send it back into the body because there is a different syntax of sending the files 05:25.520 --> 05:25.820 back. 05:25.820 --> 05:28.130 I'm going to go ahead and simply do the console log. 05:28.220 --> 05:33.140 So I'm going to go ahead and say that, hey, if you are receiving any kind of post data in the format 05:33.140 --> 05:35.690 of the files, just go ahead and console.log that. 05:35.690 --> 05:40.700 So I'm going to go ahead and say console log, request dot files because that's where all the files 05:40.700 --> 05:41.030 come in. 05:41.030 --> 05:42.860 I just want to see the information of it. 05:42.920 --> 05:48.080 So seems like okay, as of now, let's go ahead and move on to this guy up here. 05:48.080 --> 05:50.720 Hit a quick reload just for the satisfaction. 05:50.720 --> 05:52.610 Let's go ahead and send the name as well. 05:52.610 --> 05:57.380 So again, we are going to go ahead and send hit the AE and let's choose a file as well. 05:57.380 --> 06:02.840 I'm going to go ahead and choose a file of again, my classic go image, which happens to be on my desktop. 06:02.840 --> 06:04.940 I'm going to go ahead and submit this one. 06:04.940 --> 06:07.040 It says, hey, this is all going in. 06:07.040 --> 06:11.990 Also, I'm taking this sample file which is Gopi and G Ock coming back up here. 06:12.500 --> 06:14.960 Notice here I'm seeing an undefined here. 06:14.960 --> 06:19.460 So why this is happening that why this image is not going in like this. 06:19.460 --> 06:23.840 I told you that this is not how image goes in when the image actually is. 06:23.840 --> 06:29.480 Select that in any of the post format or anything you need to again go back onto the slide to understand 06:29.480 --> 06:35.450 this part that if you want to send the files like this, let me go back up here and show you again that 06:36.260 --> 06:37.520 of handling the form. 06:37.520 --> 06:42.350 We need to read this particular thing that if you want to read the file, you have to read it like this 06:42.350 --> 06:42.800 way. 06:43.100 --> 06:46.640 But again, this is a little bit of more work onto the front end side. 06:46.640 --> 06:52.520 Can we make it a little bit something like this that hey, I even of our frontend guys don't write any 06:52.520 --> 06:57.470 of this code which is truly he should be writing because this is how he should give me a data URL. 06:57.470 --> 07:01.580 But in case he doesn't want to do it, or probably you want to do everything from the back end itself, 07:01.580 --> 07:01.940 you can. 07:02.030 --> 07:06.620 Actually do a little bit more into the file upload again some of the other libraries may support it 07:06.620 --> 07:11.620 may not this guy file upload actually is just like a charm it does support that. 07:11.630 --> 07:13.460 So how you can go ahead and work on with that. 07:13.460 --> 07:18.500 Let me show you that this file upload, you can come here and again this is just an option which is 07:18.500 --> 07:19.460 there in the file upload. 07:19.460 --> 07:24.200 I have to dig up into the documentation itself so I can go ahead and pass on some of the options. 07:24.200 --> 07:27.950 And there are a couple of options which is first is use temporary file. 07:27.950 --> 07:33.530 I need to turn this flag on so I go ahead and say, hey, use this this true, and then you can actually 07:33.530 --> 07:34.820 create a temporary directory. 07:34.820 --> 07:37.790 So I'm going to go ahead and say, hey, this is my temporary directory. 07:37.790 --> 07:41.480 I'm going to go ahead and call this one as slash, temp, slash. 07:41.480 --> 07:42.140 That's it. 07:42.140 --> 07:43.760 That's all I have to do now. 07:43.760 --> 07:45.130 Again, will this always work? 07:45.140 --> 07:45.950 Probably not. 07:45.950 --> 07:46.400 Probably. 07:46.400 --> 07:49.580 You might have to go back onto this one, add this much of bit of the code. 07:49.580 --> 07:50.960 Again, this is the front end part. 07:50.960 --> 07:53.600 That's why I'm not taking it too much into the depth here. 07:53.600 --> 07:58.010 But once you have done this part, this actually does really some magic stuff. 07:58.010 --> 07:58.940 Let me show you that. 07:59.180 --> 08:01.070 I'll come back onto this localhost. 08:01.070 --> 08:03.230 Go back and hit a reload.