Okay.
What we're going to take a look at in this lesson is give our admins the ability to upload an image
when they create a new product.
And let's take a look at what we're going to use for this.
So we're going to use a service called Cloudinary.
So please do come to cloudinary.
Com if you've not used it before and you can sign up for free.
The only thing you need to do to use this service free of charge is I believe you'll just need to verify
your email address.
Other than that, that's all you need to do.
If we do take a look at the pricing of this, then they do have a free option.
And very specifically it's free forever and no credit card is required.
And that does give us quite a bit of free stuff.
I've been using this for ages, and I haven't scratched the surface of getting to 1% of the monthly
credits.
What this means because it gives us 25 gigs of managed storage, 25 gigs, monthly net viewing bandwidth,
and 25,000 5000 monthly transformations so we can manipulate or do something with our images when we
upload them to Cloudinary.
It's a very functional, excellent system, and whilst Azure does have storage that we could use to
store files, I don't think there's a free option we can use in Azure that offers what Cloudinary offers.
So this is where we're going to store our images.
We're not going to store them inside our server because we're publishing our code to Azure.
And like I say, we don't have much in the way of storage on our virtual machine, whatever it is in
Azure that it gives us to run our application service.
So storing it with our code files is not an option.
But Cloudinary is an excellent option to do this.
So I'm going to log in.
I've already got an account for this, but please do sign up for this.
Verify your email address if you need to do that.
I believe you do, and I'm just going to log in and get to the dashboard stage of lists.
So I'll pause the video and come back once I'm into cloudinary.
Okay.
And once you have signed in, you should be presented with something that looks like this.
And with any third party service that we use.
Obviously I don't have control over this, and it could change slightly compared to what I'm looking
at compared to what you're looking at.
But the principle will stay the same.
So you should have something like a getting started.
You should see something like a dashboard, and if you click on the dashboard, then what we should
be able to get is our API keys or a link to go and get our API keys.
And that's what we'll need to use with this.
So like I say, I use this for just about every training course actually when image or file upload is
needed.
And even then, even though I've used it with several different projects, I barely scratched the surface
of what's available with the free usage 0.76%.
And I'm going to go to the API keys because this is what we need to provide to our application.
The way that we're going to approach this is we're going to effectively upload the image to Cloudinary
from our API server.
And that way we ensure that where we do this, only the admin will be allowed to do this, because it's
going to be behind an authorized endpoint that only allows the admin role to access it.
This is another area that seems to have changed because we've got many API key options.
The API secrets.
I'm going to keep secrets, but we have a combination.
Three keys we need from this.
We need the cloud name which I can see up here.
We need the API key which is obviously here, and also the API secrets.
We need all three of these keys and configure them inside our application.
So I'm going to go back to VS code and inside the app Settings.json this time because I don't want to
share this on my GitHub repository.
I want to keep these keys secrets, or at least one of them I want to keep secret, so I don't want
to put it inside this file with all of the other keys here.
But this one is not going up to GitHub.
But that doesn't mean that we have a problem, because we can just provide these as environment variables
to Azure.
When we get to that stage, it's just something else we'll need to add to that.
So inside here I'm going to create a setting called Cloudinary and add a colon.
Open curly brackets and add the comma.
And I need three keys inside here I need the cloud name.
And that's going to be a string.
And I need the API key which is not secrets.
And that's going to be in that set of quotes.
And I also need the API secrets which is going to be inside here.
So I'm just going to go across to the Cloudinary dashboard and start copying these things in.
I need the cloud name.
Not secrets.
I can paste that inside here without worrying about it.
I also need the API key, so I'll copy that and paste it in here.
And I also need the API secrets.
And apparently we need to verify our password when we try and access this key.
So I'll just copy this into my clipboard and paste it inside here.
And this one I will blur out.
And that's the settings we need inside here for Cloudinary.
So I'll close this file down.
And we'll also take a different approach to how we can use our configuration this time as well, and
strongly type them inside our application.
So inside the request helpers let's create a new file.
It's going to be a class and we'll call it Cloudinary settings.
And inside here we'll have our three configuration keys.
So we're going to have a prop that's a string, that's cloud name.
And we'll make all of these required as well.
And I'll copy this down two more times.
We'll have the API key and we'll have the API secrets.
Now the way this works is we're going to use our configuration.
But strongly type it so that when we access it in other classes, we can use this class to get our cloud
name, key and secret rather than using strings to access these properties.
So there's still potential to make mistakes.
If you make a mistake here and give it the wrong name, then it's not going to bind to your cloud name
that's in your configuration settings.
So this part does need to be accurate with our Cloudinary settings.
And then we go across to our Program.cs and we tell our application about these settings.
So I'm just going to add this.
Let's see I'm just going to add it at the top actually.
So I'm going to say builder builders not services configuration this time.
And then we specify the class that we've just created which is going to be cloudinary settings.
And then we specify builder dot configuration.
And then we can get section.
And then we can specify cloudinary as the name of the section we specified in our app settings.
And it's telling me I've got a warning here and it's not configuration.
That's my mistake.
It needs to be builder dot services and then configure as this is what we need to get access to our
Cloudinary settings.
So please be accurate here.
If you get this part right everything else will work just fine.
And if you make a mistake inside here, such as getting the name of the type wrong, then that's going
to give you a problem.
So that's our configuration for Cloudinary setup.
What we'll take a look at next is creating a service that we can use, which will allow us to upload
files from our API into Cloudinary.
And we'll take a look at that next.