Signing CldUploadWidget Uploads

Signing requests is an easy way to provide enhanced security for your file uploads. This helps deter people from making unauthenticated uploads to your cloud.

Configuring Signed Uploads

Setting up CldUploadWidget to sign uploads is as simple as passing an API endpoint as a prop:

import { CldUploadWidget } from 'next-cloudinary';
 
<CldUploadWidget signatureEndpoint="<API Endpoint (ex: /api/sign-cloudinary-params)>">
  {({ open }) => {
    return (
      <button onClick={() => open()}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>

However, that API endpoint needs to return a specific shape in order to properly communicate with the CldUpload Widget.

API Endpoint to Sign Requests

When working in Next.js, we gain access to a server environment through both somewhat traditional means and serverless functions.

This means, we can use the Cloudinary Node SDK (opens in a new tab) in order to easily sign our requests.

To start off, install the Cloudinary Node SDK with:

npm install cloudinary

In order to sign our requests, we'll need to use our Cloudinary API Key and Secret, so set additional environment variables:

NEXT_PUBLIC_CLOUDINARY_API_KEY="<Your API Key>"
CLOUDINARY_API_SECRET="<Your API Secret>"

Then, we want to create a new API endpoint, which differs based on whether or not you're using the App Router or Pages router.

import { v2 as cloudinary } from "cloudinary";
 
cloudinary.config({
  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});
 
export async function POST(request: Request) {
  const body = await request.json();
  const { paramsToSign } = body;
 
  const signature = cloudinary.utils.api_sign_request(paramsToSign, process.env.CLOUDINARY_API_SECRET);
  
  return Response.json({ signature });
}