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

  1. Sign up at cloudinary.com and create a new media library.
  2. From the dashboard, note your cloud name, API key, and API secret.
  3. 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.