next-cloudinary
next-cloudinary copied to clipboard
[Bug] Invalid Signature ***. String to sign - 'source=uw×tamp=1709830648'.
Bug Report
Describe the bug
I'm getting an error "Invalid Signature ***. String to sign - 'source=uw×tamp=1709830648'" when attempting a signed upload with CldUploadWidget
Is this a regression?
No
Steps To Reproduce the error
-
Add NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME, NEXT_PUBLIC_CLOUDINARY_API_KEY, and NEXT_PUBLIC_CLOUDINARY_API_SECRET to .env.local
-
Add CldUploadWidget to a page in my application
-
Generate SHA signature in api route and return Response.json({ signature})
-
Attempt to upload image through upload widget
Expected behaviour
Image is uploaded to Cloudinary without error
CodeSandbox or Live Example of Bug
Screenshot or Video Recording
Your environment
- OS: MacOS Sonoma 14.2.1
- Node version: 18.17.0
- Npm version: 10.2.4
- Browser name and version: Google Chrome 122.0.6261.94
Additional context
I've already tried:
- Passing environment variables in manually instead of through process.env.***
- Generating SHA1 signature manually instead of using cloudinary.utils.api_sign_request
- Adding additional options to the request like uploadPreset, etc.
- Unsigned upload: this works fine
Quick comment, I think I found the issue. The issue is that just source=uw is added to the signature when sources aren't specified manually in options. When I restricted it to just local as the source it works fine. I can't see a required source option documented anywhere, please correct me if I'm wrong.
i dont think that the sources are necessarily required in a general upload, however, the upload widget passes in a source as an upload parameter and the signature needs to match the parameters being sent on that request
as far as using cloudinary.utils.api_sign_request, what issue were you hitting with that?
here's a working example of one for app Router:
https://github.com/cloudinary-community/cloudinary-examples/blob/main/examples/nextjs-clduploadwidget-signed/app/page.tsx#L27 https://github.com/cloudinary-community/cloudinary-examples/blob/main/examples/nextjs-clduploadwidget-signed/app/api/sign-image/route.ts
and the Next Cloudinary docs has a few examples similarly for Pages
https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadwidget/basic-usage.mdx#L142 https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/api/sign-cloudinary-params.js
hey @bradenhirschi going to close this for now since we haven't heard back in a while, but please feel free to re-open if you're still seeing issues. thanks