WEBVTT 00:00.020 --> 00:00.290 Okay. 00:00.290 --> 00:05.960 What we're going to take a look at in this lesson is give our admins the ability to upload an image 00:05.960 --> 00:08.060 when they create a new product. 00:08.060 --> 00:11.420 And let's take a look at what we're going to use for this. 00:11.420 --> 00:14.210 So we're going to use a service called Cloudinary. 00:14.210 --> 00:16.400 So please do come to cloudinary. 00:16.400 --> 00:20.960 Com if you've not used it before and you can sign up for free. 00:20.960 --> 00:27.140 The only thing you need to do to use this service free of charge is I believe you'll just need to verify 00:27.140 --> 00:28.190 your email address. 00:28.220 --> 00:29.960 Other than that, that's all you need to do. 00:29.960 --> 00:34.760 If we do take a look at the pricing of this, then they do have a free option. 00:34.760 --> 00:41.660 And very specifically it's free forever and no credit card is required. 00:41.660 --> 00:44.720 And that does give us quite a bit of free stuff. 00:44.720 --> 00:51.230 I've been using this for ages, and I haven't scratched the surface of getting to 1% of the monthly 00:51.230 --> 00:51.740 credits. 00:51.770 --> 00:59.510 What this means because it gives us 25 gigs of managed storage, 25 gigs, monthly net viewing bandwidth, 00:59.900 --> 01:07.570 and 25,000 5000 monthly transformations so we can manipulate or do something with our images when we 01:07.570 --> 01:09.130 upload them to Cloudinary. 01:09.130 --> 01:16.630 It's a very functional, excellent system, and whilst Azure does have storage that we could use to 01:16.660 --> 01:25.210 store files, I don't think there's a free option we can use in Azure that offers what Cloudinary offers. 01:25.210 --> 01:27.850 So this is where we're going to store our images. 01:28.180 --> 01:34.030 We're not going to store them inside our server because we're publishing our code to Azure. 01:34.030 --> 01:41.320 And like I say, we don't have much in the way of storage on our virtual machine, whatever it is in 01:41.320 --> 01:44.170 Azure that it gives us to run our application service. 01:44.170 --> 01:48.280 So storing it with our code files is not an option. 01:48.370 --> 01:51.610 But Cloudinary is an excellent option to do this. 01:51.610 --> 01:53.050 So I'm going to log in. 01:53.050 --> 01:56.020 I've already got an account for this, but please do sign up for this. 01:56.050 --> 01:58.480 Verify your email address if you need to do that. 01:58.480 --> 02:04.240 I believe you do, and I'm just going to log in and get to the dashboard stage of lists. 02:04.270 --> 02:08.890 So I'll pause the video and come back once I'm into cloudinary. 02:08.920 --> 02:09.490 Okay. 02:09.520 --> 02:14.320 And once you have signed in, you should be presented with something that looks like this. 02:14.320 --> 02:17.830 And with any third party service that we use. 02:17.860 --> 02:23.740 Obviously I don't have control over this, and it could change slightly compared to what I'm looking 02:23.740 --> 02:25.510 at compared to what you're looking at. 02:25.510 --> 02:27.280 But the principle will stay the same. 02:27.280 --> 02:29.980 So you should have something like a getting started. 02:29.980 --> 02:34.600 You should see something like a dashboard, and if you click on the dashboard, then what we should 02:34.600 --> 02:40.150 be able to get is our API keys or a link to go and get our API keys. 02:40.150 --> 02:42.610 And that's what we'll need to use with this. 02:42.610 --> 02:48.820 So like I say, I use this for just about every training course actually when image or file upload is 02:48.820 --> 02:49.540 needed. 02:49.540 --> 02:54.640 And even then, even though I've used it with several different projects, I barely scratched the surface 02:54.640 --> 02:59.650 of what's available with the free usage 0.76%. 02:59.650 --> 03:04.660 And I'm going to go to the API keys because this is what we need to provide to our application. 03:04.660 --> 03:11.320 The way that we're going to approach this is we're going to effectively upload the image to Cloudinary 03:11.350 --> 03:12.790 from our API server. 03:12.790 --> 03:19.030 And that way we ensure that where we do this, only the admin will be allowed to do this, because it's 03:19.030 --> 03:24.280 going to be behind an authorized endpoint that only allows the admin role to access it. 03:24.400 --> 03:31.120 This is another area that seems to have changed because we've got many API key options. 03:31.120 --> 03:32.230 The API secrets. 03:32.230 --> 03:35.980 I'm going to keep secrets, but we have a combination. 03:36.010 --> 03:37.630 Three keys we need from this. 03:37.630 --> 03:40.390 We need the cloud name which I can see up here. 03:40.480 --> 03:46.390 We need the API key which is obviously here, and also the API secrets. 03:46.390 --> 03:52.090 We need all three of these keys and configure them inside our application. 03:52.120 --> 04:02.410 So I'm going to go back to VS code and inside the app Settings.json this time because I don't want to 04:02.410 --> 04:05.060 share this on my GitHub repository. 04:05.570 --> 04:11.330 I want to keep these keys secrets, or at least one of them I want to keep secret, so I don't want 04:11.360 --> 04:14.960 to put it inside this file with all of the other keys here. 04:14.960 --> 04:16.880 But this one is not going up to GitHub. 04:16.910 --> 04:23.000 But that doesn't mean that we have a problem, because we can just provide these as environment variables 04:23.000 --> 04:23.720 to Azure. 04:23.720 --> 04:27.410 When we get to that stage, it's just something else we'll need to add to that. 04:27.410 --> 04:36.080 So inside here I'm going to create a setting called Cloudinary and add a colon. 04:36.110 --> 04:38.570 Open curly brackets and add the comma. 04:38.990 --> 04:42.620 And I need three keys inside here I need the cloud name. 04:43.430 --> 04:45.620 And that's going to be a string. 04:45.620 --> 04:50.480 And I need the API key which is not secrets. 04:50.480 --> 04:53.510 And that's going to be in that set of quotes. 04:53.510 --> 04:58.820 And I also need the API secrets which is going to be inside here. 04:58.820 --> 05:03.740 So I'm just going to go across to the Cloudinary dashboard and start copying these things in. 05:03.740 --> 05:05.650 I need the cloud name. 05:05.800 --> 05:06.910 Not secrets. 05:06.910 --> 05:10.930 I can paste that inside here without worrying about it. 05:10.960 --> 05:17.620 I also need the API key, so I'll copy that and paste it in here. 05:17.620 --> 05:20.140 And I also need the API secrets. 05:20.140 --> 05:25.090 And apparently we need to verify our password when we try and access this key. 05:25.120 --> 05:31.630 So I'll just copy this into my clipboard and paste it inside here. 05:31.900 --> 05:34.060 And this one I will blur out. 05:34.060 --> 05:37.660 And that's the settings we need inside here for Cloudinary. 05:37.660 --> 05:39.520 So I'll close this file down. 05:39.520 --> 05:45.640 And we'll also take a different approach to how we can use our configuration this time as well, and 05:45.640 --> 05:48.220 strongly type them inside our application. 05:48.220 --> 05:52.270 So inside the request helpers let's create a new file. 05:52.270 --> 05:58.300 It's going to be a class and we'll call it Cloudinary settings. 05:59.110 --> 06:04.120 And inside here we'll have our three configuration keys. 06:04.120 --> 06:08.080 So we're going to have a prop that's a string, that's cloud name. 06:08.740 --> 06:12.040 And we'll make all of these required as well. 06:12.040 --> 06:13.990 And I'll copy this down two more times. 06:13.990 --> 06:19.870 We'll have the API key and we'll have the API secrets. 06:19.900 --> 06:23.950 Now the way this works is we're going to use our configuration. 06:23.950 --> 06:31.510 But strongly type it so that when we access it in other classes, we can use this class to get our cloud 06:31.540 --> 06:38.500 name, key and secret rather than using strings to access these properties. 06:39.790 --> 06:41.620 So there's still potential to make mistakes. 06:41.620 --> 06:46.750 If you make a mistake here and give it the wrong name, then it's not going to bind to your cloud name 06:46.750 --> 06:48.280 that's in your configuration settings. 06:48.280 --> 06:52.600 So this part does need to be accurate with our Cloudinary settings. 06:52.600 --> 06:58.090 And then we go across to our Program.cs and we tell our application about these settings. 06:58.240 --> 07:00.940 So I'm just going to add this. 07:01.510 --> 07:04.150 Let's see I'm just going to add it at the top actually. 07:04.150 --> 07:08.250 So I'm going to say builder builders not services configuration this time. 07:08.850 --> 07:14.250 And then we specify the class that we've just created which is going to be cloudinary settings. 07:14.280 --> 07:17.940 And then we specify builder dot configuration. 07:17.940 --> 07:20.400 And then we can get section. 07:20.400 --> 07:27.330 And then we can specify cloudinary as the name of the section we specified in our app settings. 07:27.330 --> 07:31.140 And it's telling me I've got a warning here and it's not configuration. 07:31.140 --> 07:31.950 That's my mistake. 07:31.980 --> 07:38.340 It needs to be builder dot services and then configure as this is what we need to get access to our 07:38.340 --> 07:39.780 Cloudinary settings. 07:39.780 --> 07:42.240 So please be accurate here. 07:42.240 --> 07:45.930 If you get this part right everything else will work just fine. 07:45.930 --> 07:51.480 And if you make a mistake inside here, such as getting the name of the type wrong, then that's going 07:51.510 --> 07:52.650 to give you a problem. 07:52.650 --> 07:55.860 So that's our configuration for Cloudinary setup. 07:55.860 --> 08:01.590 What we'll take a look at next is creating a service that we can use, which will allow us to upload 08:01.590 --> 08:04.950 files from our API into Cloudinary. 08:04.950 --> 08:07.110 And we'll take a look at that next.