Appearance
Cloudinary
Use Cloudinary for hosted image and file delivery with transforms, CDN, and access control. NexusOrbit defaults to AWS S3 for object storage; you can switch to Cloudinary by updating environment variables and a single import in your file actions.
When to use Cloudinary
- You want managed hosting, optimization, and URL-based transforms without maintaining S3 buckets and IAM policies yourself.
- You are fine with Cloudinary’s pricing and quotas for your traffic.
For bucket-style object storage and direct S3 integration, see AWS S3 storage.
Prerequisites
- Create a free account at Cloudinary.
- Open the Cloudinary Console and sign in.
Get API credentials
- Open the Dashboard (default view after login).
- In Account details (or the equivalent section), copy:
- Cloud name
- API key
- API secret
Treat the API secret like a password—never commit it or expose it in client-side code.
Environment variables
Add the following to your project .env (root of the repo):
env
CLOUDINARY_CLOUD_NAME=""
CLOUDINARY_API_KEY=""
CLOUDINARY_API_SECRET=""Use the same names your app reads in src/config.ts (or equivalent) so server-side upload helpers receive valid credentials.
Switch from AWS S3 to Cloudinary
Upload and delete helpers are abstracted behind uploadToStorage and removeFromStorage. The default implementation lives under @/lib/s3; Cloudinary provides the same function names from @/lib/cloudinary.
In src/actions/file-actions.ts, change the import:
ts
// Default (S3)
import { removeFromStorage, uploadToStorage } from "@/lib/s3";
// Cloudinary
import { removeFromStorage, uploadToStorage } from "@/lib/cloudinary";No other changes are required at the call sites if both modules expose the same API. After switching, run through an upload and delete flow (e.g. profile or settings image) to confirm URLs and deletion behavior match your expectations.
Summary
| Step | Action |
|---|---|
| 1 | Create a Cloudinary account and copy cloud name, API key, and API secret. |
| 2 | Set CLOUDINARY_* variables in .env. |
| 3 | Point file-actions.ts imports from @/lib/s3 to @/lib/cloudinary. |
| 4 | Test uploads and removals in the app. |