7.4: Hosting Photos on Cloudinary
Last updated
Last updated
We need to setup photo uploading capability for the user. Right now, photos are just urls to content that we have no control over. We can't upload more photos to randomuser.me. We could have users upload photos somewhere else and have them provide a link - it would be more simple for us to implement - but, it's not great from the user's perspective.
Another option is that we could store the users as binary blobs in our database. We'd need to really limit file size and our user base so we could keep hosting costs low when we deploy. Databases are very inefficient ways to store things like photos.
We could also store photographs in our file system and link to them through their paths rather than URLs. The problem is also disk space and the possibility of exceeding the size for free accounts when we deploy it.
The last option is using a cloud provider and that's what we'll be using. We'll be using Cloudinary. It has a pretty good free tier and is pretty manageable to work with.
The downside to working with a cloud provider is that there are some extra steps in the process of uploading files. It is a good exercise, however. It's important to keep in mind how data is moving around after a user clicks "upload".
To help you understand, here is a diagram and an overview of the photo uploading process that that we'll implement:
Client makes a request to upload a photo to our API, passing along a JWT
Our back-end then uploads the photo to Cloudinary, passing along an API key and API secret
Cloudinary stores the photo and sends back response to our API containing the URL and a public ID for the photo.
Our API saves the photo URL and public ID to our database.
The photo is saved in our database and given a SQL ID.
Our API returns a 201 Created with the URL of the uploaded photo.
Head to www.cloudinary.com and register for an account. Browse around the docs. Especially two places:
After registering, you should be directed to your dashboard.
In Account Details - you should see three pieces of information you'll need:
Cloud name
API Key
API Secret - click "reveal"
Open up the appsettings.json file in your .API project and add a new section called Cloudinary Settings
Add the CloudName, ApiKey, and ApiSecret from your Cloudinary dashboard.
If you didn't do it when we added our Token key and you would like to protect your API information, you can enter this command in git to ignore changes made to it:
In your .Helpers project, add a new class called CloudinarySetting.cs with three properties that match what's above our configuration:
Next, we need to add a reference to our .Helpers project in our .API project. Add this to the ItemGroup with ProjectReferences:
Now, we'll add the CloudinarySettings to the ConfigureServices() method in our Startup.cs file:
In the Photo.cs file in your .Data/Entities/ folder, add a property for the PublicId:
Now, since we've added a new class - we need to run a new migration.
In your EFConnect.Data project, run the following command:
Then:
Open the Command Palette in VS Code (ctrl + shift + p) and type in NuGet Package Manager: Add Package.
Select that and then type in CloudinaryDotNet.
You'll then be prompted to choose a version number. The version used in this tutorial is 1.2.0. If there's a later version when you're doing this tutorial - it may or may not work the same. I'd go with 1.2.0 unless you feel pretty comfortable working with the docs if you run into an issue.
It will then ask you to choose your project - choose the .API project.
VS Code should then prompt you to restore your project. Click restore. If it doesn't prompt you run a dotnet restore in the .API project.
