CODEWITHSUNDEEP
authenticationnext.jsfile-uploadclient-servercloudinary
Manav
Manav

Reputation: 1

"Unauthorized" 401 error on making client side upload to Cloudinary

I wanted to use Cloudinary's API to upload images from the client side for my project.

This is an example from Cloudinary's docs to make signed requests from client side: Link to project.

The project uses Express + Node. I am using Next.js.

A signature is generated and appended to a new FormData through a server function. On the client side, I call this server action to receive the signed form data. Then I append the files(s) and make a request.

I compared the signature generated on the server with the signature received as error. They are the same! The timestamp also matches. I don't know what I am missing now.

I have an old account so it uses "fixed folders" - if that could create any issues.

Here are the server actions:

'use server';

import cloudinary, { cloudinaryConfig } from "./cloudinary.config";

function getUploadSignature(){
  // get timestamp in seconds
  const timeStamp = Math.round((new Date).getTime() / 1000);

  const signature = cloudinary.utils.api_sign_request({
    folder: 'imageUploadTest',
    timeStamp,
  }, cloudinaryConfig.api_secret);  
  
  console.log({getSignTS: signature, timeStamp});

  return { 
    cloudName: cloudinaryConfig.cloud_name,
    apiKey: cloudinaryConfig.api_key, 
    timeStamp, 
    signature, 
  };
}

export async function getSignedFormData(){
  const formData = new FormData();
  const { cloudName, apiKey, timeStamp, signature } = getUploadSignature();

  formData.append("api_key", apiKey);
  formData.append("timestamp", timeStamp);
  formData.append("signature", signature);
  formData.append("folder", "imageUploadTest");
  // remove cloud name before making request;
  formData.append('cloudName', cloudName);

  return formData;
}

I have also compared the Secret, Key and Cloud name. Everything looks fine and yet I am getting the unauthorized 401.

Upvotes: 0

Views: 23

Answers (1)

atcloud
atcloud

Reputation: 164

Cloudinary should return a response header that include the error details in the x-cld-error header, and you can see the value by using your browser's web developer tools to examine that response.

Upvotes: 0

Related Questions