WEBVTT 00:03.700 --> 00:05.020 Hey, did everyone that they share? 00:05.020 --> 00:09.640 And in this video, we're going to handle the images and it shouldn't be a scary stuff now, at least 00:09.640 --> 00:12.640 after exploring the dark section about the images. 00:12.640 --> 00:15.730 So what we're going to do is first I'm going to do a little bit of the cleanup. 00:15.730 --> 00:17.950 I'm going to go into the users will browse. 00:17.950 --> 00:19.900 I definitely need to delete all of that. 00:19.900 --> 00:22.090 So I'm going to go ahead and just trash all of this. 00:22.660 --> 00:25.780 Definitely not something that you should be doing into the production account. 00:26.140 --> 00:27.340 This is just a test account. 00:27.340 --> 00:32.380 So I'll go into the dashboard and obviously by the previous past experience, I know that it will require 00:32.380 --> 00:35.230 my cloud name, API key and the secret as well. 00:35.230 --> 00:39.370 So this is something that needs to go into my E and V file. 00:39.370 --> 00:40.540 So let's go up here. 00:40.540 --> 00:42.160 We can actually close all of them. 00:42.670 --> 00:43.930 Yeah, probably all of them. 00:43.930 --> 00:45.190 We don't need any of that. 00:45.340 --> 00:50.400 So let's go up here first into Dot and V and let's go ahead and add a simple cloud. 00:50.400 --> 00:54.820 Ordinary underscore this requires a cloud native name. 00:55.300 --> 00:57.760 And again, I can actually make a copy of this. 00:58.150 --> 01:07.120 So cloud e API key and we also need the cloud native API secret. 01:07.390 --> 01:12.760 Again, this is a really super secretive information and once I'm done with the video, I'll definitely 01:12.790 --> 01:15.700 change my API key and the secret. 01:16.060 --> 01:17.980 Okay, so this is my cloud name. 01:17.980 --> 01:18.730 Copy that. 01:18.730 --> 01:20.080 And this goes up here again. 01:20.080 --> 01:21.670 Nothing goes inside the double codes. 01:21.670 --> 01:23.770 Everything goes just outside like that. 01:23.980 --> 01:30.580 This is copy that and make sure you don't copy mine and just go ahead and create your own account. 01:30.580 --> 01:32.110 It's not going to be working for you. 01:32.110 --> 01:35.860 So copied to clipboard API secret and this goes up here. 01:36.560 --> 01:38.380 Okay, so now I have done this one. 01:38.380 --> 01:41.810 Now the point is, where should I inject this cloud native? 01:41.830 --> 01:45.070 Now this is a great debate that we can have all together. 01:45.070 --> 01:49.030 Now notice yet inside, whenever I'm writing the controller, I'm using majorly up here. 01:49.030 --> 01:54.160 So what you can do is whenever these controllers load up, you can actually do their no harm deal, 01:54.400 --> 01:55.690 no big deal, no harm. 01:55.690 --> 01:57.190 You can go ahead and do that. 01:57.190 --> 02:02.440 But from the great place of doing that is as soon as your application starts because notice we are using 02:02.440 --> 02:07.450 cloud in the controller, but cloud only needs its config and all these variables to make these connections. 02:07.450 --> 02:12.430 So as soon as the database is connected, just after that is always a good thing to have the cloud netting. 02:12.460 --> 02:16.390 We have already got the cloud native installed, so let's go ahead and do all of that up here. 02:16.390 --> 02:21.780 So we're going to go ahead and say, Hey, I want to use Cloud Neri and that is going to be coming up 02:21.790 --> 02:26.380 from require and we need the cloud native here. 02:26.620 --> 02:27.190 That's it. 02:27.190 --> 02:29.140 All the cloud native information is up here. 02:29.140 --> 02:29.800 Now let's go ahead. 02:29.800 --> 02:35.830 And once the database is connected there, I'll just go ahead and say I want to have cloud in the re 02:36.610 --> 02:37.510 config. 02:39.610 --> 02:40.870 Kind of a goes here. 02:40.900 --> 02:41.400 Okay. 02:41.410 --> 02:44.600 So how do we actually go ahead and use the cloud config? 02:44.620 --> 02:48.730 Again, you can look into the documentation we have just gone through in the last section only. 02:48.730 --> 02:55.000 So it should be it should be in your head almost and at least not I just go ahead and say cloud config. 02:55.000 --> 02:56.860 You might be saying, oh, I remember it. 02:56.860 --> 02:59.620 Now all you got to do is provide all three values. 02:59.620 --> 03:01.240 Just we go ahead and work on with that. 03:01.240 --> 03:07.120 So let's go ahead and say, hey, first you go ahead and provide me a cloud underscore name and this 03:07.120 --> 03:12.160 name is going to come up from process dot, e and V dot again. 03:12.160 --> 03:13.210 Why does it suggest? 03:13.210 --> 03:14.830 It doesn't suggest me anything. 03:15.490 --> 03:17.380 Okay, where is my dot e and V? 03:17.620 --> 03:19.570 And this is not cloud name. 03:20.500 --> 03:22.420 So this is the cloud native name. 03:23.200 --> 03:26.650 The second one is API key API underscore key. 03:26.650 --> 03:29.260 It should be suggesting me that also, but it's not. 03:29.260 --> 03:35.800 So I'm going to go ahead and say process dot E and V dot and let's bring it up here, cloud native API 03:35.800 --> 03:36.400 key. 03:36.400 --> 03:39.070 And here in the end you can name it anything. 03:39.070 --> 03:44.680 But in this case this needs to be exactly called as API key, just as mentioned into the configuration 03:44.680 --> 03:47.890 in case they change their documentation, then you have to update that one. 03:47.890 --> 03:50.320 Usually they don't update that much of the things. 03:50.590 --> 03:58.480 So we're going to go ahead and say secret and this will come up from process dot, e and V dot. 03:58.990 --> 04:00.850 What did we call this one exactly? 04:00.850 --> 04:06.400 That I always prefer to copy because in case I might have made a typo, that typo needs to go everywhere. 04:06.400 --> 04:07.540 So that is the case. 04:07.990 --> 04:08.270 Okay. 04:08.290 --> 04:11.650 Once this is all done, now we can actually go ahead and close this. 04:11.650 --> 04:17.140 So hopefully cloud native configuration, if that is correct, should be going everywhere around now. 04:17.140 --> 04:22.390 I can go into the user controller itself and now I can worry about how to handle the images part. 04:22.420 --> 04:24.070 The images are optional here. 04:24.580 --> 04:27.550 Maybe somebody is creating an account and passing us the image or not. 04:27.550 --> 04:29.500 So that all depends on that. 04:29.500 --> 04:32.950 So for that we will be needing image upload as well. 04:32.950 --> 04:35.800 So let's go ahead and first bring in the file uploader. 04:36.400 --> 04:37.630 So far, the file uploader. 04:37.630 --> 04:41.080 I'll go at the top and I will say that, Hey, you can come up here. 04:41.080 --> 04:51.640 So let's just go ahead and say file upload and that will be coming up from require and express file 04:51.640 --> 04:52.180 upload. 04:53.320 --> 04:54.790 So file uploader is here. 04:54.790 --> 05:00.040 I will worry about the image at the very top and I'll make a kind of a conditional statement that whether 05:00.040 --> 05:01.960 these images are there or not. 05:01.960 --> 05:07.480 So I'll check that first so I can come here and I'll just put a simple if statement. 05:07.870 --> 05:12.850 Now, first thing is, if somebody is sending me the files or not, I need to take care of that. 05:12.850 --> 05:16.510 So I'm going to go ahead and say if the request actually contains any files or not. 05:16.510 --> 05:19.540 If they contains the file, then only I'll try to do that. 05:19.540 --> 05:24.400 If there are no file being sent, that means things should go and work on as it is how they have been 05:24.400 --> 05:25.570 working on in there. 05:25.930 --> 05:30.070 Okay, so once the files are there, then I need to extract that file. 05:30.070 --> 05:35.440 So let's go ahead and say I'll store this file into available and I'm going to go ahead and say, hey, 05:35.440 --> 05:42.730 I want to go ahead and say, hey, request dot files dot and let's call this one as simply photo. 05:43.000 --> 05:48.520 And again, this reminds me we forgot to do one thing that either if we are going with this way, then 05:48.520 --> 05:50.290 somebody needs to send me file URL. 05:50.290 --> 05:55.510 But this reminds me just in a minute that I can go into the index or JS and configure this a little 05:55.510 --> 05:55.900 bit more. 05:55.900 --> 06:01.810 I can just say that, hey, whenever somebody is using this app dot use, we can actually make this 06:01.810 --> 06:06.190 file upload which except except the temporary files. 06:07.420 --> 06:11.600 And for that I need to go not in the index actually into the app. 06:12.190 --> 06:14.290 So let's bring up the file upload again. 06:14.290 --> 06:16.030 We are already having the file upload probably. 06:16.030 --> 06:17.560 We just wrote that at the top. 06:17.650 --> 06:24.010 So let's go ahead and have it here just after the cookie parser and the file upload is there. 06:24.010 --> 06:30.460 So now I can go ahead and say, hey, let's use the file upload and let me give you an object and I 06:30.460 --> 06:33.010 will say that use temp files. 06:33.010 --> 06:34.570 Yes, of course you need to do that. 06:35.050 --> 06:36.610 Let's go ahead and say true. 06:36.700 --> 06:40.330 And then we are going to say, what is your temp file directory? 06:40.420 --> 06:44.020 We're going to go you and give you a directory which is say slash temp. 06:44.020 --> 06:45.730 You can name this directory whatever you like. 06:45.790 --> 06:46.200 Okay. 06:46.240 --> 06:48.010 So this part is really important. 06:48.040 --> 06:49.930 We have already discussed onto that. 06:51.160 --> 06:56.800 Coming back onto the part now, we're going to go ahead and say that, hey, this file is coming in. 06:56.800 --> 07:00.880 If that file comes up, just go ahead and extract this from files photo. 07:00.880 --> 07:06.580 And this information needs to be conveyed to the front end user that, hey, you need to go ahead and 07:06.880 --> 07:09.670 just call this one as photo, otherwise this will not work. 07:10.180 --> 07:10.570 Okay. 07:10.570 --> 07:17.530 So assuming that now you have a photo URL and we have an we kind of a burden out the front end users 07:17.530 --> 07:19.360 role, let's go ahead and upload that. 07:19.360 --> 07:21.940 So how do we do uploading of that part? 07:22.420 --> 07:25.300 We actually need a cloud net here as well, so why not? 07:25.300 --> 07:27.520 Let's go ahead and inject cloud native here as well. 07:27.520 --> 07:35.530 So we are going to say, hey, give me a cloud DX Mary and that cloud native will be coming up from 07:35.980 --> 07:38.860 require and coming from cloud. 07:39.910 --> 07:41.410 So why do I need a cloud native here? 07:41.410 --> 07:44.830 Because obviously cloud native is going to be responsible for uploading this thing. 07:44.830 --> 07:47.980 So let's go ahead and say, hey, cloud ordinary, come on. 07:47.980 --> 07:48.640 So just me. 07:48.640 --> 07:49.300 There we go. 07:49.750 --> 07:55.180 And we'll be using a dot v two of the cloud native since we didn't call it as V to appear. 07:55.180 --> 07:56.350 We need to do this here. 07:56.350 --> 07:57.400 So no big deal. 07:57.400 --> 08:03.250 We're going to say dot v two and we are going to say, hey, you have a method uploader which can help 08:03.250 --> 08:05.470 me to upload a file. 08:06.490 --> 08:11.290 So for the uploading of the file, we can actually go ahead and pass on this file directly and that's 08:11.290 --> 08:11.410 it. 08:11.410 --> 08:15.040 Now also it takes some of the options, so let's go ahead and give these options. 08:15.310 --> 08:19.720 We will be providing a folder because we have just cleaned this folder for the exact same purpose. 08:19.720 --> 08:22.900 So we're going to go ahead and say, hey, just upload everything into the user. 08:23.020 --> 08:28.060 Now, not only that, I want to restrict the user that what kind of the length and the width of the 08:28.060 --> 08:28.930 photo should be. 08:28.930 --> 08:31.150 So I'll restrict it onto the width part. 08:31.150 --> 08:35.620 So I'll just say, Hey, whenever you're uploading the photo, just go ahead and make the width of 150. 08:35.620 --> 08:36.940 Always, all the time. 08:36.940 --> 08:40.420 I will also give it a crop because not all the photos are going to be there. 08:40.420 --> 08:46.060 So we're going to go ahead and use the scale factor you want to use fit, scale, stretch, whatever 08:46.060 --> 08:48.040 you like to do, you can just go ahead and do that. 08:48.040 --> 08:50.860 Now, obviously, once this is being uploaded, we need to hold the results. 08:50.860 --> 08:54.850 So we're going to go ahead and say let's go ahead and store you into the result. 08:54.880 --> 08:59.320 Now, since this method is going to take some time, let's go ahead and use the weight here as well. 08:59.470 --> 09:00.030 Okay. 09:00.460 --> 09:01.570 So this is all good. 09:01.570 --> 09:03.370 Now we have this result up here. 09:03.370 --> 09:10.180 We need to access this result and further down the road we're going to inject this result as soon as 09:10.180 --> 09:12.670 we create this object here. 09:12.820 --> 09:15.970 So this result can be a little bit tricky to access from the top. 09:15.970 --> 09:20.440 So let's go ahead and actually store that so let result. 09:21.690 --> 09:23.700 And we're going to just do it like that. 09:23.730 --> 09:27.450 Remove the coins from here so that we store the result directly up here. 09:28.680 --> 09:30.380 Okay, so should be all good. 09:30.390 --> 09:35.240 Now we have a direct access to this result without worrying about how deep in the level we are going. 09:35.250 --> 09:37.710 Maybe you want to go further deep for some issues. 09:38.760 --> 09:44.970 So once this is done, we know that this result holds the ID as well as the security URL. 09:45.300 --> 09:49.490 So let me quickly verify into the model itself that we are calling it as photo. 09:49.500 --> 09:52.380 We have ID and the security URL looks nice. 09:52.380 --> 09:58.680 So further down the road I will say that, hey, we are going to create a photo option as well. 09:59.130 --> 10:03.450 Now this photo option will be constructed based on since this is an object. 10:03.450 --> 10:04.830 So let's go ahead and do this. 10:05.040 --> 10:13.620 And we're calling this one as ID ID will be coming from result dot public ID underscore ID and it has 10:13.620 --> 10:15.320 also secured URL. 10:16.430 --> 10:24.000 Seek your underscore URL and that is coming up from come on secure URL. 10:24.420 --> 10:27.330 And this is coming up from result. 10:28.320 --> 10:29.100 Dot. 10:30.130 --> 10:31.470 Come on, suggest me security. 10:31.810 --> 10:32.410 There we go. 10:32.650 --> 10:38.110 Okay, so now these things are done, and hopefully we will be able to handle the images nicely. 10:38.110 --> 10:42.880 But we don't have any ways to test it through the postman, so we're going to just keep it as it is. 10:42.880 --> 10:44.450 And I guess that's pretty much it. 10:44.470 --> 10:48.820 Let's go ahead and see if we are able to actually register another user via the postman. 10:48.820 --> 10:51.130 So I'm going to go ahead and select the two here. 10:51.640 --> 10:56.230 And this one is going to be an email with the two at AE dot dev. 10:56.260 --> 10:58.690 Let's see if we are able to send another user. 10:59.050 --> 11:04.450 And notice here it says cannot read property public underscore ID of undefined. 11:04.450 --> 11:11.860 So in this case we are we are not sending the image, but we are always crafting this one up here. 11:12.100 --> 11:17.110 So this is the exact time when we make our model a little bit changes and move it on to the back model. 11:17.110 --> 11:21.910 So again, remember, we always want to go ahead and grab these IDs. 11:21.910 --> 11:25.450 So we're going to go ahead and say, hey, this is required and this is also required. 11:25.450 --> 11:28.840 We don't know how to test it right now, but definitely this is what we want. 11:28.840 --> 11:31.720 All the user who sign up should give us the photo and all of that. 11:31.720 --> 11:33.310 So let's go ahead and save this one. 11:33.310 --> 11:35.560 And the error should be different this time. 11:35.560 --> 11:37.240 So let's go ahead and send this one. 11:37.420 --> 11:41.590 And this one is saying again, cannot read the property of this public and all of that. 11:41.590 --> 11:48.340 So this is the important part for us that, hey, we are requiring these models and all of that. 11:49.030 --> 11:50.380 Let's go into the controller. 11:50.680 --> 11:56.800 Now, remember into this photo, we are not able to read this result when we are not sending the photos 11:56.800 --> 11:57.490 itself. 11:58.360 --> 12:00.400 So at this point we are in a weird situation. 12:00.400 --> 12:04.780 We are actually to over according the old model, the photos are compulsory. 12:04.780 --> 12:07.540 Whenever a user is signing up, we want the photos to come up. 12:07.540 --> 12:10.990 But at this point we cannot test these things from the post one itself. 12:10.990 --> 12:12.460 So we need to figure out a solution. 12:12.460 --> 12:13.210 Of course we will. 12:13.210 --> 12:14.200 We always do. 12:14.200 --> 12:16.720 It might take some time, but we always figure out a solution. 12:16.720 --> 12:21.520 So let's go ahead and catch up in the next video and we are going to see a small kind of out of the 12:21.520 --> 12:25.090 box solution of how to test out in these weird situation. 12:25.090 --> 12:27.100 Let's go ahead and catch up into the next video.