Cloudinary

1. Setup

To use Cloudinary, you need to configure your API credentials in the environment variables.

Environment Variables

Create or update your .env.local file with your Cloudinary account details:

CLOUDINARY_CLOUD_NAME="your_cloud_name"
CLOUDINARY_API_KEY="your_api_key"
CLOUDINARY_API_SECRET="your_api_secret"

Obtaining Credentials

You can find these credentials in your Cloudinary account dashboard:

1. Sign up or Log in to your Cloudinary account.
2. Navigate to the Dashboard.
3. Your Cloud Name, API Key, and API Secret will be displayed prominently on the dashboard page, usually under the "Account Details" or similar section.
4. Copy these values into your .env.local file.

2. Centralized File Management

StarterKitPro provides a centralized helper module located at lib/cloudinary.ts for interacting with the Cloudinary API. This module simplifies common tasks like uploading, deleting, and replacing files.

Using this centralized module ensures consistency and helps prevent "ghost files" – files that might remain orphaned in your Cloudinary storage after being deleted from your application's database or records. The helper functions manage the interaction with the Cloudinary API directly.

3. Secure Server Actions

For seamless integration with your frontend components, StarterKitPro includes pre-built Server Actions in actions/file-actions.ts. These actions leverage the lib/cloudinary.ts helper and provide secure endpoints for:

• Uploading new files: Handles the upload process from the client to Cloudinary.
• Deleting existing files: Removes files from Cloudinary.
• Replacing files: Deletes an old file (identified by its public ID) and uploads a new one in its place.

You can call these Server Actions directly from your client-side components (e.g., forms, profile settings) to manage user-uploaded files securely and efficiently.