WEBVTT 00:04.550 --> 00:05.450 Hey there, everyone. 00:05.510 --> 00:06.130 They share. 00:06.140 --> 00:10.550 And let's talk about how to handle multiple images or multi file upload. 00:10.850 --> 00:16.010 Again, this involves a tiny bit of the front end, which I don't really like for this course. 00:16.010 --> 00:21.140 But again, you need to go into the post form and again need to make sure that there is a flag here 00:21.140 --> 00:25.650 inside the input where you are handling all of the images, which is multiple. 00:25.670 --> 00:30.620 Yeah, that's just a keyword that needs to be placed, otherwise you won't be able to select multiple 00:30.620 --> 00:33.050 of the files or the images in this case. 00:33.200 --> 00:37.280 Now, another thing that you need to pay very, very big attention is this sample file. 00:37.280 --> 00:38.760 The name is still same. 00:38.780 --> 00:44.900 So instead of being able to just see one data in itself, now it becomes an array and it handles multiple 00:44.900 --> 00:45.650 of the file itself. 00:45.650 --> 00:47.480 So be very cautious on that part. 00:47.870 --> 00:51.080 This will heavily depends on how you actually accept the data. 00:51.230 --> 00:52.550 So that's all what we'll be doing. 00:52.550 --> 00:55.190 And I would like to give it a little bit of the faster go. 00:55.220 --> 00:59.360 Don't want to just drag the course, but just let us go a little bit faster this time. 00:59.570 --> 01:03.520 So what I'll do is instead of having all of this, let's first create a couple of variables. 01:03.520 --> 01:07.590 So let me show you how to do that, because rest of the things you already understand, the cloud theory, 01:07.610 --> 01:11.530 the issues, the files and the errors, especially, you know that all about it. 01:11.540 --> 01:13.460 So I'm going to go ahead and call this one up here. 01:13.460 --> 01:20.910 So this is going to be a result and we need another variable, if I can write that better result. 01:20.930 --> 01:21.410 Yeah. 01:21.860 --> 01:25.160 And another thing that we are going to need is an array. 01:25.160 --> 01:29.510 So we're going to call this one as image array because I'm running out of the name. 01:29.510 --> 01:31.010 So there we go. 01:31.010 --> 01:32.760 And this is going to be the basic array. 01:32.780 --> 01:37.070 What we're going to do with this array in just a minute, you will understand that how this is going 01:37.070 --> 01:39.170 to work in let's go up here. 01:39.170 --> 01:43.190 And this time I'll just comment this out so that you can have it for a later usage. 01:43.190 --> 01:44.180 And there we go. 01:44.210 --> 01:50.390 Now also into the final output, I would like to get the result as well as this image array as it is 01:50.660 --> 01:53.000 so that we can see what's happening and the result part. 01:53.180 --> 01:59.570 Now I have comment about this one and also notice here I'm storing this reference into this let file 01:59.570 --> 02:01.460 equals to request file or sample file. 02:01.460 --> 02:03.590 We probably don't need that part as well. 02:03.590 --> 02:08.180 So let's go ahead and comment all of this out and we'll handle this case up here. 02:08.210 --> 02:10.640 Let me go ahead and write a comment for this one. 02:10.640 --> 02:18.200 So this one is going to be a simple use case for single image so that in exercise files you can actually 02:18.200 --> 02:19.190 take care of that. 02:19.190 --> 02:26.090 And this one is going to be a case for multiple images. 02:27.320 --> 02:31.880 Now, only thing that you need to know and to be very cautious about is what we are calling these things. 02:31.880 --> 02:35.030 We are calling them simply as sample image. 02:35.030 --> 02:35.720 That's it. 02:35.750 --> 02:38.450 Now let's first verify and these checks are always good. 02:38.450 --> 02:39.320 Maybe you want to do it. 02:39.320 --> 02:40.550 Maybe you don't want to do it. 02:40.550 --> 02:45.190 So if we have something into the requested files, then only this piece of code is going to work. 02:45.200 --> 02:47.090 Otherwise we'll just handle things as it is. 02:47.090 --> 02:49.550 Maybe the images are optional or something like that. 02:49.760 --> 02:51.770 So now we need to run the loop. 02:51.770 --> 02:53.980 So let's go ahead and run the sample for loop. 02:53.990 --> 02:55.490 We're going to call this one as index. 02:55.490 --> 02:57.830 It will start from zero, of course, obviously. 02:57.830 --> 02:59.750 Now, how long this is going to run? 02:59.750 --> 03:04.760 This is going to run till request dot files because that's why I'm receiving the file. 03:04.760 --> 03:07.010 But not just only there. 03:07.010 --> 03:13.610 I have to go one step further and I have to say sample file because this sample file now is an array 03:13.610 --> 03:18.740 and I can run a property of dot length onto this one and I'll keep on running this one till index plus. 03:18.740 --> 03:23.150 Plus, there is no issue in that, but I'm not interested in the inside code, which is just making 03:23.150 --> 03:23.900 a mess here. 03:24.170 --> 03:29.390 Now what we're going to do is we are going to go ahead and say, Hey, Cloudera, I want to upload something. 03:29.390 --> 03:33.620 So I'll just say, Hey, Uploader, just go ahead and upload one of my photo. 03:33.830 --> 03:36.010 So which photo you might want to upload? 03:36.020 --> 03:37.400 Obviously, we need to give it that. 03:37.400 --> 03:42.080 So we're going to say request dot files, dot sample file. 03:42.080 --> 03:46.070 And I told you this now becomes an error because you passed on a flag of multiple. 03:46.070 --> 03:51.350 So I want to go ahead and upload whatever the index number is in the first case around zero, then the 03:51.350 --> 03:53.480 second round one too, and so on. 03:53.780 --> 03:59.120 But is it that much it no, that's not it because we already saw and had a long discussion that file 03:59.390 --> 04:01.730 temp file path actually uploads the image. 04:01.730 --> 04:05.660 So we're going to copy this one up here and I'm going to go ahead and say, hey, x is this property 04:05.660 --> 04:06.830 and upload this one. 04:07.070 --> 04:08.330 Is this all it? 04:08.360 --> 04:11.330 No, because we need to pass on an option of folder as well. 04:11.330 --> 04:17.060 So let's go ahead and say, hey, I want to have a folder where I want to select all the like the folder 04:17.060 --> 04:17.870 name is users. 04:17.870 --> 04:19.520 That's what I'm trying to say. 04:20.300 --> 04:21.770 Okay, so this is it. 04:21.770 --> 04:26.180 But we also saw that there is an option that I can store this one into a result. 04:26.180 --> 04:30.470 So let's go ahead and say, hey, I want to store all of this into a result just like that. 04:30.470 --> 04:35.120 But we also saw that it gives a problem, so we need to use a weight and already this entirety of the 04:35.120 --> 04:36.110 thing is in the async. 04:36.110 --> 04:37.790 So you get the idea of all of that. 04:37.880 --> 04:39.740 But this is not it, this is not it. 04:39.740 --> 04:43.190 You can actually go ahead and console.log this result at this point here as well. 04:43.190 --> 04:44.450 But I'm not going to do that. 04:44.450 --> 04:48.860 What are we doing is I'm going to go ahead and select this image array and I'm going to go ahead and 04:48.860 --> 04:52.160 use a push of it and I'll be pushing this result entirely. 04:52.160 --> 04:55.610 I can go ahead and push this result entirely, but that's not fun. 04:55.610 --> 04:57.350 Let's go ahead and create an object. 04:57.350 --> 05:01.970 Instead of that, we are pushing an object and this object will be pushing just the two properties. 05:01.970 --> 05:02.780 So we're going to go ahead and. 05:02.880 --> 05:08.050 Say, Hey, public underscore Earl or public ID not Earl. 05:08.070 --> 05:08.850 Public ID. 05:09.000 --> 05:09.480 Yeah. 05:09.840 --> 05:10.950 And this is coming in. 05:10.950 --> 05:14.420 We saw that it's actually resolved, not public ID. 05:14.430 --> 05:16.010 That's what we saw in the result. 05:16.020 --> 05:19.380 And by the way, this is just still here, in case you forgot from the last video. 05:19.380 --> 05:23.190 So this is I'm storing public ID and I'm also interested in this security URL. 05:23.190 --> 05:26.640 So these are the two properties that I'm accessing from the result itself. 05:26.880 --> 05:31.830 I'm going to go ahead and put a comma just like that and this one will be secure URL. 05:31.830 --> 05:38.700 So I'm going to go ahead and say secure your URL and the property that I'm interested in is secure URL. 05:39.750 --> 05:41.490 So these are the two things I'm pushing in. 05:41.490 --> 05:46.800 And hopefully by the time it has done all the rotation, like all the images that were selected got 05:46.800 --> 05:49.440 uploaded, they will be pushed into this image array. 05:49.440 --> 05:52.890 And finally we are dumping down this image array at the result itself. 05:52.890 --> 05:54.900 So should be fine. 05:55.320 --> 05:58.470 We won't be able to see this much into the console log. 05:58.770 --> 06:01.200 We can actually do this instead of the details. 06:01.200 --> 06:03.570 Yeah, we are dumping down the details entirely here. 06:04.170 --> 06:08.220 We're not sending it into console.log, so let's go ahead and do that part as well. 06:08.220 --> 06:09.900 So I'm going to go ahead and copy this. 06:10.050 --> 06:16.440 Instead of the result, we are going to go ahead and have a console log here of the details as well 06:17.160 --> 06:19.680 just to have some information for self as well. 06:19.680 --> 06:21.680 And that's all that's all you need to do. 06:21.780 --> 06:25.800 Let's go ahead and save this one and save it one more time. 06:26.160 --> 06:28.260 And let's go back on to this one up here. 06:28.260 --> 06:33.510 And this now should be in theory at least, should be able to select multiple files and we should be 06:33.510 --> 06:34.230 able to get to go. 06:34.230 --> 06:36.270 So let's go ahead and say test, test. 06:36.270 --> 06:41.610 Let me select multiple files from my thumbnails that I created for the Go series. 06:41.610 --> 06:43.710 So this is one, this is another. 06:43.710 --> 06:47.370 I can hold on my control key or command key and can select multiple of them. 06:47.370 --> 06:51.720 Let's select three of them and we're going to go ahead and upload this says three files. 06:51.720 --> 06:52.530 That's good. 06:52.530 --> 06:55.290 I'm going to go ahead and say I want to submit it. 06:55.290 --> 06:58.800 This is going to take some time because obviously you're uploading three files, by the way. 06:58.800 --> 07:03.570 It gives you the option of shrinking down the file, lower down the quality and whole bunch of things. 07:03.570 --> 07:06.600 Since we are not in the front end, there is no loader on anything. 07:06.600 --> 07:09.630 But as you can see, this object comes in not really good. 07:09.630 --> 07:15.810 I'm more interested in my console.log because that's a better approach and it's giving us nice notice. 07:15.810 --> 07:20.160 We say the result is undefined because I think we changed the name a little bit onto that. 07:20.160 --> 07:23.940 We're calling it as a result, so probably something we can figure it out. 07:23.940 --> 07:26.910 No worries on that part, I think just a typo or something. 07:26.910 --> 07:32.220 But in the image error itself, we are able to receive the image public ID and we are able to hold the 07:32.220 --> 07:33.150 security URL. 07:33.150 --> 07:38.460 So this object in itself can be pushed into the database itself that, hey, these are the resources 07:38.460 --> 07:43.920 and whether you are uploading username, multiple username, designing an Instagram, designing an e-commerce, 07:43.920 --> 07:49.200 whatever you are designing, you can reuse this code as it is, but just for a confirmation, let's 07:49.200 --> 07:52.440 also check whether things went into cloud or not. 07:52.440 --> 07:53.820 Let's hit a reload. 07:54.180 --> 07:58.290 And yes, this time we didn't have that much of fun with the errors and stuff because sometimes we need 07:58.290 --> 07:59.820 to pace up the course as well. 07:59.850 --> 08:05.550 I know you enjoy the the error part and all of that too much, but that's a little bit for my offline 08:05.550 --> 08:06.960 courses whenever I take them. 08:07.110 --> 08:10.650 So this is all good and everything is coming up nicely. 08:10.830 --> 08:14.250 Okay, so where we are, we should move back on to the presentation. 08:14.250 --> 08:14.950 There we go. 08:14.970 --> 08:15.260 Okay. 08:15.360 --> 08:21.150 So by this point, I expect that, you know, forms really in depth, you know, how to get homeworks 08:21.150 --> 08:21.150 works. 08:21.150 --> 08:28.020 You also understand that if the forms are designed into some of the templating engine like bug or maybe 08:28.170 --> 08:33.420 something else similar to that, then it's requested params otherwise in react angular view, all of 08:33.420 --> 08:38.490 those guys, it comes into the body format and you also understand about the post forms, the always 08:38.490 --> 08:42.270 comes into the request body and you also understand now how to handle forms. 08:42.270 --> 08:49.200 Again, handling the forms is really easy, but handling the images or file it requires a a coordination 08:49.200 --> 08:51.330 between the front end guys and the back end guys. 08:51.330 --> 08:53.970 You need to make sure that the form is a multipart form. 08:53.970 --> 08:55.650 It's sending the files properly. 08:55.650 --> 08:58.200 It either is sending me the data URL or not. 08:58.200 --> 09:01.620 Then I have to make sure I have adjusted the back end according to that. 09:01.620 --> 09:05.820 So it's all about coordination that you want to have and whenever the next time you see a YouTube are 09:05.820 --> 09:08.820 talking about that, coordination is really important between the teams. 09:08.820 --> 09:13.320 This is exactly the coordination we are talking about and this is kind of a chat we usually do in the 09:13.320 --> 09:17.970 slack and all of that when we coordinate between the Learn Code online team and all of our other venture 09:17.970 --> 09:18.600 teams as well. 09:18.600 --> 09:20.280 So this is exactly what we do. 09:20.280 --> 09:23.190 And now you know about the behind the scene details as well. 09:23.280 --> 09:27.390 So if you are enjoying this series entirely, please let me know on my Instagram. 09:27.390 --> 09:30.330 It helps me to motivate and to bring more such stories. 09:30.330 --> 09:32.370 It's really important for me personally. 09:32.640 --> 09:37.410 I know I'm asking too much, but spend a little bit of time, reach me out by email or Instagram and 09:37.410 --> 09:39.300 just drop me a thanks for the series. 09:39.300 --> 09:40.650 It helps me a lot. 09:40.650 --> 09:42.810 This is this is really important for me. 09:42.810 --> 09:43.740 So thank you so much. 09:43.740 --> 09:45.330 And let's catch up in the next section.