Hi. I am building a React and Node JS app. I used Cloudinary's NodeJS SDK for the backend and using the Upload Widget for the front end. I am using signed uploads so when a user uploads to the widget, the image goes to the node backend, gets signed and returns in the callback. It mostly and I get the response. But I get the following error:
Invalid Signature [Signature] String to sign - public_id=sample&source=uw×tamp=1628953078'.
Please let me know what I can do solve. The cloudinary code in my app folders is listed below. Thanks!
index.html (Client)
Home.js (Client)
const MyWidget = () => {
var myWidget = window.cloudinary.createUploadWidget(
{
cloud_name: 'myCloudName',
api_key: 'myApiKey',
public_id:'sample',
upload_signature: generateSignature,
},
(error, result) => {
if (!error && result && result.event === "success") {
console.log("Done! Here is the image info: ", result.info);
} else if(error) {
console.log(error);
}
}
);
const handleClick = () => {
myWidget.open();
}
return (
<button id="upload_widget" className="cloudinary-button" onClick={handleClick}>
Upload
</button>
)
}
const generateSignature = async (callback, params_to_sign) => {
try {
const signature = await getSignature(params_to_sign);
callback(signature.data);
} catch (error) {
console.log(error);
}
};
index.js (Server)
import {v2 as cloudinary} from 'cloudinary';
cloudinary.config({
cloud_name: 'myCloudName',
api_key: 'API_KEY',
api_secret: 'API_SECRET',
secure:true
});
API
export const getSignature = (params_to_sign) => (API.get(`/signature?params_to_sign=${params_to_sign}`));
controllers (Server)
export const signature = async (req, res) => {
const { params_to_sign } = req.query;
try {
const result = cloudinary.utils.api_sign_request(params_to_sign, 'API_SECRET');
res.status(201).json(result);
} catch (error) {
res.send(error);
}
}
Comments
1 comment