WEBVTT 00:04.000 --> 00:07.690 Hey did everyone this year and welcome to another new section. 00:07.780 --> 00:12.610 Now, this section is one of the most important section, of course, just like the last previous section. 00:12.640 --> 00:16.420 Now, in this section, I will talk about how to handle forms and images. 00:16.420 --> 00:19.420 And some of you might be saying, hey, I know how to handle forms and images. 00:19.420 --> 00:22.750 I have done that in the React course or Angular course or somewhere. 00:22.750 --> 00:23.720 Other courses. 00:23.740 --> 00:28.120 No, my friend, you actually don't really know how to handle the forms now. 00:28.120 --> 00:32.920 Well, the reason why a lot of people who have just gone through with some of the libraries like React 00:32.920 --> 00:36.580 or Angular or V or something like in the front end, like just react Native Basics. 00:36.580 --> 00:39.370 They really don't understand the forms in depth. 00:39.370 --> 00:41.620 And this is not their fault. 00:41.620 --> 00:46.930 This is the fault or kind of an extraordinary power of the back end developers. 00:46.930 --> 00:51.970 They have done their job so well that you really don't understand at the front end side that how these 00:51.970 --> 00:57.460 form works forms we know that they are basic get request and the post request, but in this section 00:57.460 --> 01:00.640 you are going to truly understand that how actually form works. 01:00.910 --> 01:03.250 Another important aspect is images. 01:03.250 --> 01:08.410 Now a lot of time people struggle that how I'm going to send the images, how I'm going to get the path 01:08.410 --> 01:10.870 back or the URL back, how it actually works. 01:10.870 --> 01:13.780 Sometimes it works out of the box, sometimes it doesn't. 01:13.780 --> 01:14.890 And all of that. 01:14.890 --> 01:19.600 I'll give you a reason right in this video so that once and for all, it gets all clear to you. 01:19.810 --> 01:26.980 So the the fear of uploading the images, videos, PDF or anything is definitely going to go away from 01:27.010 --> 01:27.760 that part. 01:27.760 --> 01:30.130 So let's go ahead and understand and talk a little bit. 01:30.130 --> 01:33.940 I'll give you a few examples as well as well as some of the things which we have already designed, 01:33.940 --> 01:37.000 but I haven't shown, you know, it's not something that I personally designed. 01:37.000 --> 01:41.470 We have designed this together in the course itself, but I didn't give much focus because it was not 01:41.470 --> 01:42.550 important at that point. 01:42.550 --> 01:45.100 Now it is important, so let's talk about it. 01:45.370 --> 01:49.600 So how we're going to handle forms and images now we're going to talk about them one by one. 01:49.600 --> 01:54.280 First, we are going to understand that how the get type of forms are being worked and there is not 01:54.280 --> 01:56.290 too many of varieties in the form itself. 01:56.290 --> 01:59.860 There are just get types of forms and the post type of forms here. 01:59.890 --> 02:04.540 Now in case you don't know about this, get type of form is usually being searched whenever you type 02:04.540 --> 02:05.890 anything in the Google search. 02:05.890 --> 02:07.360 That is a get type of form. 02:07.360 --> 02:10.900 Whenever you are searching on any website, that is usually a get type of data. 02:10.960 --> 02:17.410 No of the sensitive information is being thrown away the get type of the form because it actually travels 02:17.410 --> 02:23.320 right in the clear text view and nobody wants you to see pass on your password in the clear text format. 02:23.350 --> 02:28.900 Another is the post form in which data is being sent not in the clear text, but it is actually kind 02:28.900 --> 02:33.880 of hidden and is being passed on and can be read by the server itself. 02:33.880 --> 02:35.140 That's the only idea. 02:35.170 --> 02:38.470 Another type of thing is upload a file or files. 02:38.470 --> 02:43.330 There can be one file that you want to upload and there can be multiple files that you want to upload. 02:43.330 --> 02:48.490 Now, in this case, it includes all the images, it includes PDFs, maybe videos as well. 02:48.520 --> 02:52.060 How you process that video where you save those videos, that's up to you. 02:52.060 --> 02:54.610 But I'm going to show you what's the secret behind it. 02:55.180 --> 02:59.530 And after watching this section, definitely you won't be going like a full mode. 02:59.530 --> 03:00.550 And what is the problem? 03:00.550 --> 03:03.340 Why am I file is not uploading and a whole bunch of other things. 03:03.340 --> 03:04.810 So we're going to talk about that. 03:04.810 --> 03:10.420 So I will definitely come back and we will create separate section as well as separate code files for 03:10.420 --> 03:11.920 all of this, what we are going to do. 03:11.920 --> 03:16.150 But right now I want to talk about something really, really important regarding the images. 03:16.150 --> 03:20.680 So let me open up my AE back end and here is the AE back end. 03:20.680 --> 03:22.960 So this is what we have created so far. 03:22.990 --> 03:24.220 I hope you have the code files. 03:24.220 --> 03:28.300 If not, just let me know in the comments section, not on the public comment section. 03:28.300 --> 03:34.630 In the AE itself, the team will guide you from where you can actually grab all of these x exercise 03:34.630 --> 03:35.200 files. 03:35.200 --> 03:38.480 So let's drag and drop this AE docs in case you remember. 03:38.480 --> 03:40.330 I hope you haven't skipped that section. 03:40.330 --> 03:44.650 So let's go ahead and run this one and I want to show you something really, really interesting. 03:44.650 --> 03:46.000 Let's close all of this. 03:46.000 --> 03:46.930 How to run this? 03:46.930 --> 03:47.710 I have no idea. 03:47.710 --> 03:52.060 So always I come back and look into packager Jason and that's where the start script is there. 03:52.060 --> 03:57.640 So I'm going to go ahead and say NPM, run and start, or I can just go ahead and say NPM start. 03:57.640 --> 03:59.740 That is also totally acceptable. 03:59.740 --> 04:02.680 Whenever you receive a new project, always go like this. 04:02.680 --> 04:04.330 Always look in the package rotation. 04:04.330 --> 04:07.570 Don't just blindly start NPM, run NPM, Dave and everything. 04:07.570 --> 04:08.920 No, we don't do that. 04:08.920 --> 04:13.240 We always go into the scripts and look for how to properly run that, what our package is and all of 04:13.240 --> 04:13.720 that. 04:13.750 --> 04:18.970 So here to jog your memory a little bit, we have used express file upload and to jog it a little bit 04:18.970 --> 04:24.640 further down the road, I'm going to go ahead and say, hey, I want to go into the local host and here 04:24.640 --> 04:29.290 if I go into API docs, I'm able to see this entirety of the things by default. 04:29.290 --> 04:30.700 The root is computed for me. 04:30.700 --> 04:33.970 That is nice and we worked on the course upload. 04:33.970 --> 04:40.300 So here if I go ahead and say that, hey, I want to try it out, I want to choose an image, I simply 04:40.300 --> 04:41.980 go ahead, choose an image. 04:42.130 --> 04:46.990 And the let's just say I use this one, which is a recent YouTube video that I worked on, and I'm going 04:46.990 --> 04:50.740 to go ahead and say that this is a multipart form data, which we have already done, and I'm going 04:50.740 --> 04:51.940 to go ahead and execute. 04:51.970 --> 04:57.970 Now, this successfully actually uploads my photo and I can go ahead, go back up here and in the images 04:57.970 --> 05:00.220 I can see somewhere there should be. 05:00.220 --> 05:01.120 So this is the image. 05:01.200 --> 05:02.490 That we recently uploaded. 05:03.030 --> 05:04.100 So this is nice. 05:04.110 --> 05:08.430 But the problem here is it is a big, big problem. 05:08.730 --> 05:14.040 This is the point where exactly people think that, okay, if I have worked on the file upload, I have 05:14.040 --> 05:17.520 used express file upload, I'll be able to upload the images. 05:17.550 --> 05:20.080 No, my friend, this is not that easy. 05:20.100 --> 05:22.980 You might be using multiple, you might be using file upload. 05:22.980 --> 05:23.970 Doesn't really matter. 05:23.970 --> 05:25.380 You might be using Formidable. 05:25.380 --> 05:28.610 And I can name probably five different libraries further down the road. 05:28.620 --> 05:33.810 But until unless you understand the core basics that what is the problem that happens when uploading 05:33.810 --> 05:34.320 the file. 05:34.320 --> 05:40.260 You will never, ever be able to recognize this and these kinds of kind of abstraction layer that programmers 05:40.260 --> 05:43.770 have put in that helps you to not focus much on there. 05:43.770 --> 05:46.350 Let me explain what it means and what happens there. 05:46.500 --> 05:51.060 Now, whenever you upload an image, there is a lot that happens in the image and you should really 05:51.060 --> 05:53.400 read this API reference of a file reader. 05:53.430 --> 05:58.680 Now you cannot just give me a file name and I can magically upload that your computer doesn't know where 05:58.680 --> 06:00.210 that file is either. 06:00.210 --> 06:06.390 I need a complete path which I can access from the backend to upload that image, or I need a blob or 06:06.390 --> 06:07.970 a file that I can upload. 06:07.980 --> 06:10.110 So what's the difference between the file and variable? 06:10.140 --> 06:12.080 A whole lot of differences there. 06:12.090 --> 06:19.350 For example, a lot of time when the backend is not properly configured or I can say rather the strategy 06:19.350 --> 06:25.260 is not to have this blob, but rather to give you just the just the file itself that hey, give me the 06:25.260 --> 06:30.030 file reference itself and I upload that it is expected that you should not give the file name. 06:30.030 --> 06:32.100 You should give me a data URL. 06:32.100 --> 06:32.850 What is that? 06:32.850 --> 06:33.600 Let me show you. 06:34.620 --> 06:38.780 Whenever you read a file, you should read the file as read as data URL. 06:38.790 --> 06:40.950 This is classic one on one JavaScript up here. 06:41.010 --> 06:46.350 Now in this there are some examples as well that if you are uploading a file itself and you want to 06:46.350 --> 06:51.150 change the preview of the file itself, you should not directly just read the file and get the file 06:51.150 --> 06:51.720 name itself. 06:51.720 --> 06:55.800 If you want to preview the file, which also can be transferred to the back end itself. 06:55.800 --> 07:00.600 This much of the code that you should be writing up here, for example, you should first get the preview. 07:00.600 --> 07:04.350 This is the basic classic stuff and document query selected and everything. 07:04.350 --> 07:06.570 This is where the important step comes in. 07:06.570 --> 07:09.150 So what happens whenever you actually read the file? 07:09.450 --> 07:10.920 It actually comes up into this. 07:10.920 --> 07:12.150 Let me scroll a little bit. 07:12.150 --> 07:14.520 It has a couple of modes up here as well. 07:14.790 --> 07:15.480 Looks like. 07:15.480 --> 07:17.700 Let me go into the file reader. 07:18.390 --> 07:19.620 Yeah, this is the one. 07:21.250 --> 07:22.180 And constructor. 07:22.180 --> 07:22.620 There we go. 07:22.630 --> 07:25.840 So going a little bit onto the file reader and a file reader. 07:25.840 --> 07:30.220 Whenever you try to read the file, it has three modes the empty mode, the loading mode and the done 07:30.220 --> 07:30.670 mode. 07:30.670 --> 07:35.890 So as soon as the done part is done, then only you'll be able to either send the file on to the back 07:35.890 --> 07:38.110 end or to able to have a preview of it. 07:38.170 --> 07:42.520 Now if I scroll a little bit, you can see there are a lot of methods up here and there is a specific 07:42.520 --> 07:43.810 example being given to here. 07:43.810 --> 07:46.270 So let me go back up here and give this example. 07:46.570 --> 07:47.560 So. 07:48.360 --> 07:49.020 There we go. 07:49.050 --> 07:50.800 So this is the code that you have to read. 07:50.820 --> 07:53.550 Notice here it says reader, dot ad event listener. 07:53.550 --> 07:58.440 And as soon as the load event is complete or you can check for the numbers as well, then you can actually 07:58.440 --> 07:59.760 go ahead and have this one. 07:59.760 --> 08:03.450 So you might be saying, hey, what is all this and why should I read this data URL? 08:03.450 --> 08:05.820 What's the difference between a URL and a data URL? 08:05.850 --> 08:10.380 Let me first give you an example up here, which is again, abstraction, but I'll show you more details. 08:10.380 --> 08:15.450 If I go ahead and select any of this image, I go ahead and open this up and this image is being previewed 08:15.450 --> 08:18.300 because now it is not reading the file, just the name. 08:18.300 --> 08:20.520 It is actually getting the file here. 08:20.520 --> 08:22.110 What does that mean? 08:22.110 --> 08:23.400 Let me explain it more. 08:23.790 --> 08:28.920 So notice here in this URL we are actually getting, this server is running and we are displaying all 08:28.920 --> 08:29.730 the headers itself. 08:29.730 --> 08:32.160 Let's get a little bit more information. 08:32.160 --> 08:38.670 So in the part where we worked on the course upload around line number 66, let's go ahead and see that 08:38.670 --> 08:44.430 when these files actually comes up as in the file format, what all the information that it is bringing 08:44.430 --> 08:44.850 in. 08:44.850 --> 08:49.290 So let's go ahead and say, hey, I want to go ahead and log some more information and I want to see 08:49.290 --> 08:53.580 that what kind of file you are bringing in so that we get more information about it. 08:53.610 --> 08:57.180 Now notice here we have used the file upload and this is bringing in the file. 08:57.180 --> 08:59.880 And now I want to check what all the information you are bringing in. 08:59.880 --> 09:01.530 So I go ahead, save this one. 09:01.530 --> 09:02.640 The server is up and running. 09:02.640 --> 09:04.560 We can even go into full screen mode. 09:04.560 --> 09:06.690 Let's go ahead and try this one more time. 09:07.620 --> 09:13.410 So I'm going to say, hey, reset this form and let's go ahead and kind of cancel this one. 09:13.410 --> 09:15.180 Let's try it out. 09:15.540 --> 09:20.700 Choose a file and I'm going to go again with the classic of Go Image. 09:20.700 --> 09:23.730 Again, it can be anything and let's execute this one again. 09:23.730 --> 09:24.810 This went successfully. 09:24.810 --> 09:29.580 We obviously know this, but this is further down the information that it is bringing another entire 09:29.580 --> 09:32.340 object, not just the file name that you were thinking. 09:32.340 --> 09:36.840 And notice here, apart from the name, it is also getting the entire data, which is a buffer. 09:36.840 --> 09:43.050 Now this entire data buffer itself is an image in the binary format, of course, but this is your image. 09:43.050 --> 09:44.580 This actually goes in. 09:44.580 --> 09:49.770 But even if you try to just send this data itself, this is since not this is not the image because 09:49.770 --> 09:53.910 image is other properties like the mime type and the MD5 and whole bunch of other things. 09:53.910 --> 09:57.360 It will not go onto the server and that is where the problem comes in. 09:57.360 --> 10:02.700 Sometimes back end are designed in such a way that you will pass on me entirety of this information 10:02.700 --> 10:04.890 or you will give me a data URL. 10:04.890 --> 10:08.670 So in case the back end is expecting that, hey, I will give you a data URL. 10:08.670 --> 10:14.460 In this case you have to write this much of the code and read the file as a file reader itself and then 10:14.460 --> 10:16.380 pass on this information to the back end. 10:16.380 --> 10:21.540 And yes, I have seen so many of the incidents where these things happen and it is expected from you 10:21.540 --> 10:25.830 as a frontend developer, whether React, Angular or anything else, that you will read it as a file 10:25.830 --> 10:28.350 reader and give me their now it's up to you. 10:28.830 --> 10:32.670 You can ask the backend developer that, Hey, I don't want to read it like this, I will just give 10:32.670 --> 10:35.730 you the file itself and you just handle it automatically. 10:35.730 --> 10:36.660 Yes, that is possible. 10:36.660 --> 10:38.880 We will even design that kind of a thing here. 10:38.880 --> 10:41.790 But again, I hope this gives you more information that is there. 10:41.790 --> 10:45.300 Now, I would like to bring your attention a little bit towards this temp file path. 10:45.300 --> 10:50.220 We are going to use this and this is the main culprit why a lot of features are not being properly designed 10:50.220 --> 10:51.030 in the back end. 10:51.150 --> 10:56.940 So I guess a lot of things that I've explained and try to give you a scenario again, I know this is 10:56.940 --> 11:01.710 a theory video, but this is a really, really super important video to understand further what entirely 11:01.710 --> 11:03.690 we'll be doing in this entire section. 11:03.690 --> 11:05.610 So go ahead, watch it one more time. 11:05.610 --> 11:09.660 But again, understand every point that I'm trying to make in front of you. 11:09.660 --> 11:12.750 Understand the different scenarios that I'm trying to portray here. 11:12.750 --> 11:14.370 Without this, you will face problems. 11:14.370 --> 11:17.460 So go ahead, read this properly or watch this video again. 11:17.460 --> 11:19.230 It is really super important for you. 11:19.260 --> 11:21.510 Let's go ahead and catch up in the next video.