WEBVTT 00:00.800 --> 00:02.400 Are everyone. 00:02.760 --> 00:09.040 In this video we will talk about the unlock features. 00:09.320 --> 00:09.840 Okay. 00:09.880 --> 00:16.200 We'll be uploading media like image or video. 00:18.040 --> 00:29.360 In this video, let me show you what exactly that happen on the front end application okay I will use 00:29.360 --> 00:30.840 the raw for use. 00:32.200 --> 00:34.160 What about play? 00:34.960 --> 00:38.760 We will mark the API to upload. 00:42.440 --> 00:54.720 Okay we will back to the server to upload and the server it will take the help of the Cloudinary with 00:54.720 --> 00:55.960 the Cloudinary. 00:57.880 --> 01:00.800 It will respond back the. 01:00.800 --> 01:08.210 Now you are heading back to the reservoir. 01:09.010 --> 01:15.130 Okay, after we already have a, um, what we need to do. 01:16.330 --> 01:30.770 Well, we need to create one more invoice for, ah, the URL right here into the media URL. 01:31.370 --> 01:32.050 What do you mean? 01:32.050 --> 01:44.530 Right now is after we already apply and we got the, um, we will mark another code into the server. 01:45.770 --> 01:57.410 So avatars, for example, like that pass the, uh, media into the boss. 01:57.610 --> 01:58.250 Okay. 01:58.290 --> 02:08.630 We will update us into the boss box right here with the wristband from previous and we will update us. 02:10.070 --> 02:14.750 So please don't zero idea what we will do. 02:15.390 --> 02:23.710 So in this video, let me show you how we can set up the Cloudinary into our project. 02:24.870 --> 02:35.070 And you know my setup setup is a little bit complicated okay. 02:35.710 --> 02:44.230 And I hate to, uh, run some configuration, okay? 02:45.150 --> 02:54.510 Never in my life, um, try to remember some configuration is better. 02:54.950 --> 03:06.320 I will show you how we can show the Sean Bobbitt mean to say, okay, how it can be set up and we will 03:06.320 --> 03:08.600 follow in that tutorial. 03:09.240 --> 03:11.400 That's the strategy right now. 03:12.160 --> 03:15.200 Firstly I will show about Next.js. 03:15.240 --> 03:16.560 Cloudinary. 03:17.240 --> 03:27.680 And if you say this is the topic from the official documentation of the cloud Reebok.com, right after 03:27.680 --> 03:32.520 we click here, you will see we have a subject like this. 03:32.800 --> 03:39.360 It's either angular, but I don't care that I only care Next.js. 03:40.200 --> 03:49.760 So let's say first we already create a new project right here, right? 03:52.360 --> 03:53.360 We are following. 03:53.360 --> 03:55.760 We need to install the commentary. 03:56.000 --> 03:58.280 Let's install that with my. 04:05.770 --> 04:06.850 Now let's say. 04:09.410 --> 04:16.930 Right here we need to create a node, another module for Cloudinary. 04:16.970 --> 04:17.450 Right. 04:17.490 --> 04:28.130 For sure we'll create a module and we only need the module and service right. 04:29.610 --> 04:36.490 And we also need to create a provider for configuration something like that. 04:36.850 --> 04:44.170 We can uh we will need to create the provider. 04:44.930 --> 04:51.610 You just need to invoke this thing directly inside the module. 04:52.010 --> 04:59.610 But right now I think I will focus into the documentation to show you okay. 04:59.610 --> 05:01.510 Firstly like I will go buy this thing. 05:01.950 --> 05:04.350 And you gently took up my. 05:04.830 --> 05:08.590 Okay, don't try to remember us. 05:09.230 --> 05:12.070 We will use an array module. 05:15.150 --> 05:18.510 After that we will use the render service. 05:19.670 --> 05:26.790 And on Maxwell we will generate the module first. 05:27.070 --> 05:36.110 And after that we will generate the service or controller if you want right here we don't list the controller 05:36.390 --> 05:36.830 okay. 05:36.910 --> 05:40.670 Let me accelerate the provider also. 05:46.870 --> 05:55.230 So after that one we are already have a crowded array. 05:57.870 --> 06:03.000 Right here Let's remove this file. 06:03.360 --> 06:04.400 And only that. 06:10.680 --> 06:14.120 Inside the cloudinary provider. 06:15.440 --> 06:17.240 Uh, let me also. 06:23.360 --> 06:23.720 Um. 06:25.240 --> 06:25.640 Ah. 06:28.680 --> 06:38.320 Uh, I think right here is with this tag, it already create a new folder. 06:39.240 --> 06:39.640 Hmm. 06:41.960 --> 06:43.560 Let's remove those also. 06:45.000 --> 06:45.400 Okay. 06:45.400 --> 06:47.480 Actually, to create cloud. 06:49.880 --> 06:52.040 Dot provider. 06:53.440 --> 06:54.720 Dot this. 06:55.440 --> 06:57.480 That will be very enough. 06:57.960 --> 07:03.610 And let me copy Be everything from this cloud reconfiguration. 07:04.570 --> 07:05.850 Buddhas over here. 07:11.210 --> 07:11.770 Okay. 07:12.410 --> 07:16.650 Right now we need to boost a little bit up. 07:17.530 --> 07:20.170 Now Cloudera name? 07:22.090 --> 07:23.530 Let me create. 07:26.050 --> 07:30.250 I will go with cloud rename model over here. 07:32.210 --> 07:33.450 We are case. 07:35.650 --> 07:36.090 Buddha. 07:36.090 --> 07:36.810 Over here. 07:39.010 --> 07:44.930 And uh, secret key boost dot over here. 07:46.690 --> 07:48.290 And Max over here. 07:48.410 --> 07:52.610 You just need to login into the cloud. 07:53.210 --> 08:02.630 Come over here and click into the home and click into the last bar and you will see the option to go 08:02.670 --> 08:05.030 to the API keys over here. 08:06.510 --> 08:14.190 Or you can just need to click into the setting and curl is an evacuation. 08:14.350 --> 08:18.230 It will be totally the same right? 08:18.950 --> 08:20.790 And we need to put the name. 08:21.550 --> 08:21.910 Okay. 08:21.910 --> 08:22.950 This is the name. 08:22.990 --> 08:27.590 Or here will be the name of the cloud entry. 08:27.630 --> 08:31.470 I will dictate and put that over here. 08:32.670 --> 08:40.390 And with the API key I will also put that over here and API secret. 08:40.430 --> 08:42.110 I will copy also. 08:48.070 --> 08:49.630 From here I will. 08:51.750 --> 08:55.070 Set up the the code. 08:57.590 --> 09:01.040 Let me bounce the video and tabletop. 09:04.600 --> 09:07.880 And let me close inside the approach. 09:11.880 --> 09:26.720 After all, let me, uh, put my makeup on base and put my cigarettes over here so that around the environment 09:26.720 --> 09:31.880 variable and let forgot into the documentation also. 09:33.960 --> 09:37.880 We already lost the configuration. 09:40.520 --> 09:48.000 And we need to create some data for respond. 09:49.760 --> 09:50.360 Right. 09:53.000 --> 09:57.960 Um, right here, right here. 10:00.090 --> 10:05.690 Archila will create directly inside Cloudinary. 10:05.690 --> 10:06.290 Right here. 10:06.810 --> 10:07.370 Okay. 10:09.130 --> 10:14.290 Or you can separate it into the global type. 10:14.570 --> 10:17.570 But I think this is not available. 10:18.890 --> 10:21.850 This only you inside this folder. 10:22.530 --> 10:23.130 Right. 10:26.810 --> 10:31.010 Over here we will customize respond. 10:35.050 --> 10:38.530 And finally we will set up the service. 10:47.810 --> 10:52.530 Let me copy everything over here inside the service. 10:54.210 --> 10:55.690 Put that over here. 10:57.370 --> 10:58.130 Also it 11:00.870 --> 11:10.270 And we have a lot of error right now because we haven't installed yet. 11:17.830 --> 11:19.510 Let me read a little bit. 11:19.830 --> 11:22.470 But like we need to install the stream. 11:28.830 --> 11:32.310 And let's see what here. 11:35.430 --> 11:39.790 We need to create a new also. 11:43.270 --> 11:43.910 Raffle. 11:44.110 --> 11:49.630 Let me install the stream file package. 12:04.200 --> 12:08.160 And after that we will install the filter bucket. 12:13.280 --> 12:13.680 And. 12:17.360 --> 12:20.360 The pass grid also. 12:21.480 --> 12:23.000 Let me install first. 12:27.720 --> 12:29.840 And let's copy this line. 12:32.720 --> 12:33.760 Move it over here. 12:43.680 --> 12:44.280 Okay. 12:52.440 --> 12:53.200 Right here. 12:53.200 --> 12:56.000 Let me chain a little bit this part. 13:35.610 --> 13:36.290 Right here. 13:36.290 --> 13:40.050 We have a lot of bias issue. 13:48.530 --> 13:51.290 We need to fix a little bit. 13:51.690 --> 13:55.890 First place we made a reject a beta. 13:57.910 --> 14:04.150 Environmental rejection reason to make an error. 14:04.390 --> 14:08.150 It means right here we will return an error. 14:09.430 --> 14:09.910 Okay. 14:09.950 --> 14:12.470 From error log message. 14:14.710 --> 14:16.630 And with here. 14:21.310 --> 14:23.230 How do you respond? 14:25.550 --> 14:26.230 Right here. 14:26.270 --> 14:32.950 I will pass this thing into Cloudinary. 14:32.950 --> 14:33.950 Respond. 14:39.390 --> 14:40.030 Okay. 14:41.310 --> 14:50.950 And with this, I, um, we need to override the, uh, link. 14:51.630 --> 14:55.190 So click on show documentation. 15:00.320 --> 15:00.920 They make up. 15:00.920 --> 15:02.240 Why this rule? 15:08.040 --> 15:11.280 Is r s let let me override. 15:13.840 --> 15:14.240 R? 15:20.000 --> 15:20.400 Over. 15:20.400 --> 15:22.040 This will fix the issue. 15:22.080 --> 15:27.640 And let me explain for you what actually happened. 15:27.640 --> 15:32.280 Right now in the blog file is already created. 15:32.280 --> 15:33.120 Promise. 15:34.640 --> 15:35.200 Okay. 15:37.440 --> 15:39.840 Well, you may ask me. 15:40.760 --> 15:42.360 Okay, we go over here. 15:42.360 --> 15:46.760 It just needs somehow to create a server block. 15:48.760 --> 15:49.440 Okay. 15:50.800 --> 15:56.280 And you may ask me what in the stream a file. 15:56.760 --> 15:59.170 Okay, Absolutely. 15:59.810 --> 16:01.250 This lab got right here. 16:01.250 --> 16:01.970 It will. 16:04.930 --> 16:18.850 Convert the buffer into the readable stream and send the data into the upstream of the cloud array. 16:19.970 --> 16:29.890 Well, the reason is very simple, because the cloud read the notes directly from a buffer. 16:30.250 --> 16:30.890 Okay. 16:33.170 --> 16:34.290 How do you read? 16:34.330 --> 16:36.370 Cannot understand buffer. 16:36.410 --> 16:41.970 So for that reason we just need to create the stream. 16:42.770 --> 16:43.330 Okay. 16:43.370 --> 16:50.050 And we will connect it with the stream right here. 16:50.090 --> 16:50.490 Okay. 16:50.490 --> 16:52.650 This is the concept of Node.js. 16:53.730 --> 16:54.290 Okay. 16:54.330 --> 16:58.390 Maybe you can check out my Not yet. 16:58.430 --> 17:10.470 Of course it does, because I already explained for you very detail about what exactly about Red Stream 17:11.150 --> 17:12.910 or Rye Stream. 17:13.590 --> 17:14.030 Okay. 17:14.070 --> 17:15.630 What exactly is stream? 17:15.790 --> 17:17.310 It is not. 17:18.350 --> 17:28.390 But right now you just need to remember the stream right here cannot understand the buffer. 17:28.630 --> 17:38.750 For that reason, we need to use this library to convert the buffer into the readable stream. 17:39.390 --> 17:49.470 And with the pi method right here, it will send this readable stream into the cloud area. 17:49.830 --> 17:50.190 Okay. 17:50.230 --> 17:53.150 Over here like this. 17:53.190 --> 17:58.040 And with this duck right here it just need to somehow a block. 17:58.600 --> 17:59.160 Okay. 18:00.760 --> 18:03.080 It will care about a block file. 18:06.760 --> 18:07.160 Okay. 18:07.200 --> 18:10.440 Richard, a row of the cloudy Ray. 18:10.480 --> 18:16.160 You actually don't need to care too much about them. 18:19.720 --> 18:28.560 So after we already installed right here, we need to import module. 18:30.040 --> 18:31.800 Let me copy everything. 18:34.320 --> 18:36.480 Inside module over here. 18:37.480 --> 18:38.000 Right. 18:38.040 --> 18:38.560 Both. 18:41.320 --> 18:41.760 What? 18:41.960 --> 18:42.280 We. 18:45.160 --> 18:46.320 Wrote over here. 18:48.600 --> 18:50.160 Cloud provider. 18:52.600 --> 18:56.960 And serve it right. 18:56.960 --> 18:59.170 This is a cloud provider. 19:00.410 --> 19:10.330 And you can say, we can call this line right here and put that roughly inside the provider. 19:16.370 --> 19:21.010 So that is not how we can configure. 19:21.690 --> 19:27.490 And we need to create the controller for both from the oplog file. 19:28.170 --> 19:28.810 Right. 19:30.010 --> 19:37.930 So right here we can create the controller. 19:48.930 --> 19:49.330 Um. 19:51.690 --> 19:53.050 Let me read a bit. 19:53.570 --> 19:56.330 We can create controllers. 19:58.630 --> 19:59.630 Plus five. 20:08.790 --> 20:18.630 Okay, so we already installed the new package. 20:28.910 --> 20:32.470 Now let me create. 20:35.390 --> 20:36.590 The controller. 20:36.990 --> 20:39.590 Okay, I think I can create. 20:41.670 --> 20:46.510 The controller for Cloudinary also. 20:48.350 --> 20:51.470 Well, let's do generate new one. 20:58.640 --> 21:00.240 Something like that. 21:10.280 --> 21:10.840 Why? 21:15.360 --> 21:15.640 Are. 21:19.040 --> 21:19.440 We. 21:19.600 --> 21:24.480 You have a cloud controller, right? 21:32.400 --> 21:36.960 So you wake up everyday and use over here. 21:41.640 --> 21:44.960 Involved and evolve some stuff. 21:52.400 --> 21:56.120 And we need to inject cloudinary. 22:18.810 --> 22:21.730 And let me show you how we can upload that. 22:23.050 --> 22:25.370 I will create a new folder. 22:32.850 --> 22:33.090 I'll. 22:39.690 --> 22:40.090 Also. 22:46.290 --> 22:48.130 Have you add a request? 22:52.330 --> 22:52.730 Name. 23:06.230 --> 23:06.510 Okay. 23:06.510 --> 23:08.070 So cloud is right. 23:10.430 --> 23:12.390 And blog. 23:27.470 --> 23:28.470 Is, uh. 23:33.070 --> 23:33.470 Uh. 23:41.870 --> 23:46.230 The body show the form data. 23:47.030 --> 23:47.670 Okay. 23:48.350 --> 23:58.560 And this query right here, we will boost exactly the K up the screen over here will be five. 24:02.080 --> 24:03.920 And five. 24:04.720 --> 24:08.720 And some thing. 24:10.760 --> 24:12.360 Added to the image. 24:12.400 --> 24:12.960 Okay. 24:14.240 --> 24:21.120 And I will go over and I will put in loop. 24:21.160 --> 24:26.440 Say we got an internal server error. 24:26.720 --> 24:29.400 Let's see what exactly does. 24:35.680 --> 24:35.920 Uh. 24:35.920 --> 24:37.640 Cannot read property. 24:37.640 --> 24:38.560 Uploaded file. 24:38.560 --> 24:40.320 Create stream. 24:41.520 --> 24:41.880 Um. 24:47.440 --> 24:54.440 Let me go back to the service right here between this line right here. 24:54.720 --> 24:55.760 Not work. 24:55.760 --> 24:55.850 Okay. 25:04.370 --> 25:08.170 Let me try to literally inbox. 25:31.170 --> 25:32.690 And send again. 25:37.810 --> 25:38.410 Okay. 25:38.530 --> 25:39.450 We are ready. 25:41.490 --> 25:42.410 To fly. 25:43.250 --> 25:49.690 If you save this page it will now we already successfully. 25:50.650 --> 26:00.910 And you will see we got the new You are over here, right? 26:01.870 --> 26:05.950 This is the UI from Cloudinary. 26:07.390 --> 26:10.150 Let me copy this URL. 26:12.750 --> 26:15.230 And this is the URL. 26:15.270 --> 26:18.030 And this learning will be better. 26:18.550 --> 26:21.110 This is the best, right. 26:23.310 --> 26:23.790 And. 26:30.470 --> 26:31.110 Let me. 26:34.070 --> 26:40.230 Now you will say we already uploaded successfully. 26:40.550 --> 26:43.470 So very very good right. 26:44.470 --> 26:49.150 So I hope you understand this video. 26:49.870 --> 26:52.830 And I will see you in the next one.