Getting Started
Cloudinary setup
Guide to connect the template to Cloudinary for media uploads (images, video, audio) and how to configure an upload preset and environment variables.
1. Create a Cloudinary account
- Sign up at cloudinary.com and create a new media library.
- From the dashboard, note your cloud name, API key, and API secret.
- Create an unsigned upload preset if you want client-side uploads without exposing your API secret.
2. Environment variables
Add Cloudinary credentials to your .env.local file. This project expects these variables (see .env.example):
// .env.local (example)
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
NEXT_PUBLIC_CLOUDINARY_IMAGE_PRESET=unsigned_image_preset
NEXT_PUBLIC_CLOUDINARY_VIDEO_PRESET=unsigned_video_preset
NEXT_PUBLIC_CLOUDINARY_FILE_PRESET=unsigned_file_preset
3. SDK initialization
This project uses a small config wrapper at src/lib/cloudinary.config.ts which exposes the Cloudinary cloud name, base upload URL and the preset names. The client-side upload helper lives in src/features/chat/services/cloudinary.service.tsand performs a direct POST to Cloudinary using the unsigned presets and the folder conventions defined in the config.
Example config (already present in the repo): src/lib/cloudinary.config.ts exports a CLOUDINARY_CONFIG object containing baseUrl, presets and folders.
4. Example upload service (server)
// src/features/chat/services/cloudinary.service.ts (client-side helper)
import { CLOUDINARY_CONFIG } from '@/lib/cloudinary.config';
// Example POST done in the project using FormData to:
// ${CLOUDINARY_CONFIG.baseUrl}/{resourceType}/upload
// The repo exposes helpers: uploadImage(file, roomId), uploadVideo(file, roomId), uploadFile(file, roomId)
Store the returned URL and a small media.type on the message document.