Secure Uploads
Tutorial · Cloudinary Getting Started Series

Secure Image Uploads
in Next.js with Cloudinary

Public (unsigned) upload presets are fine for quick prototypes — but real apps need to prove they own the upload request. This demo shows you how to generate a server-side signature so your API Secret never reaches the browser.

Signed Uploads

Generate a SHA-256 signature on the server. Cloudinary verifies it before accepting any file.

API Route Pattern

A single Next.js Route Handler (/api/sign) is the only place your API Secret is used.

Real-world Ready

Drop this pattern into production. Extend the route to add auth checks, rate limiting, or folder routing.

Quick Setup (3 steps)

  1. 1Copy .env.local.example to .env.local and fill in your Cloudinary cloud name, API key, and API secret from the Cloudinary console.
  2. 2Run npm run dev and open this page in your browser.
  3. 3Click the upload zone below, pick an image, and watch the secure flow in action. Open your browser's Network tab to see the POST /api/sign request before the upload fires.

Upload

Signed · secure · fast

Gallery

View all uploads

Upload an Image

Signed · API Secret never reaches the browser

Secure

/api/sign generates a SHA-256 signature server-side before every upload

How Signed Uploads Work
  1. 1
    Widget POSTs to /api/signBefore touching Cloudinary, the widget sends the upload parameters to your server.
  2. 2
    Server signs with API SecretYour server hashes the params with CLOUDINARY_API_SECRET and returns the signature — the secret never leaves.
  3. 3
    Widget uploads with signatureThe signed request goes directly from the browser to Cloudinary's CDN edge — your server is not in the upload path.
  4. 4
    Cloudinary verifies & storesCloudinary re-computes the hash. If it matches, the upload is accepted. Invalid or tampered requests are rejected.

Gallery