Missing dependency: Signed Upload requires an API key

EduardoM
EduardoM Member Posts: 2 ✭
edited July 3 in Developer APIs

Hi everyone and thanks for your help in advance!

I am trying to do a simple signed image upload to my NextJS app but I am getting this error:
Missing dependency: Signed Upload requires an API key

This is my 'pages/api/sign-cloudinary-params' file

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 default async function handler(req, res) {

const { paramsToSign } = req.body;
const signature = cloudinary.utils.api_sign_request(paramsToSign, process.env.CLOUDINARY_API_SECRET);
res.status(200).json({ signature });

}



And this is how I am calling it on my front end
<CldUploadWidget signatureEndpoint='/api/sign-cloudinary-params'> {({ open }) => { return <button onClick={() => open()}>Upload an Image</button>; }} </CldUploadWidget>

I have followed all the instructions on all the 1000 different versions of the documentation that exist, but nothing works. I can do unsigned uploads without any problems, but when I try to sign them, I get this error. Also tried the instructions in the most updated video about it with no luck. There is a comment on this video describing exactly what I am facing. This should be something super easy if it worked like described in the video and docs… But I get this error message in the dev.tools console right away on page load. The values are all sucessfully loged on my server console.

Once again, thank you very much if you are able to help.

https://www.youtube.com/watch?v=ULp6-UjQA3o

Tagged:

Comments

  • Tom
    Tom Member, Cloudinary Staff Posts: 108

    Hi @EduardoM,

    Thanks for reaching out.

    Can you confirm you have specified the API key in your upload widget configuration? e.g. See this code in our NextJS upload widget example.

    Please let me know if you have any other questions or queries.

    Kind Regards,

    Thomas

  • EduardoM
    EduardoM Member Posts: 2 ✭

    Hi Thomas,

    Thank you very much for your answer. While I couldn't figure out exactly where that code should go, it helped me to find through my Node modules that the apiKey was looking by default to a variable called NEXT_PUBLIC_CLOUDINARY_API_KEY on my .env file instead of the CLOUDINARY_API_KEY that I had. So I just updated that name on the .env and everything worked.

    Thank you for your assistance.

Categories