Cloudinary provides a dedicated server-side method to generate a hash containing all the information that is required to initiate direct-upload from your application.
The call to this api should include all the upload options which are about to be used (e.g. public-id, incoming-transformation, etc.). Additionally, you will be required to provide the timestamp (which we strongly recommend to acquire on the server side) and the API_KEY & API_SECRET (which should be stored on your server-side only).
Please see below for example backend code used for generating a signature. Scroll down in the code to input your cloud_name, api_key, and api_secret.
Please see below for example frontend code used for making a call to the backend to generate a signature, then using that signature to upload a file. The result of the upload is logged to the iframe's console.
Comments
12 comments
How can I do this same this process with Node js? I've been searching the documentation but i can't find it.
The same sign_request() method is available on the Node.js libraries as well.
See: https://github.com/cloudinary/cloudinary_npm/blob/228cc1f57b0311eb154782312239b3dd9cf82351/lib/utils/index.js#L875
Could someone just tell us how to do this over HTTP? I'm using a language not supported by cloudinary SDK's. There are no docs on this subject that I can find, googling ends up here and other SDK's.
Hi John,
The idea is to set up an endpoint on your own servers where one of this SDKs is installed or calculations are imitated (if using different PL). Then you can have the signature rendered into the page or asked via AJAX from the client-side prior to uploading to Cloudinary.
ffs... Thought this would take an hour to do but it took a day of tinkering.
Node-
function signFileUploadRequest(request, response) {
// get the api_secret (and keep it secret)
var apiSecret = process.env.CLOUDINARY_SECRET;
// grab a current timestamp
var millisecondsToSeconds = 1000;
var timestamp = Math.round(Date.now() / millisecondsToSeconds);
// generate the signature using the current timestmap and any other desired Cloudinary params
var signature = Cloudinary.utils.api_sign_request({ timestamp: timestamp }, apiSecret);
// craft a signature payload to send to the client (timestamp and signature required, api_key either sent here or stored on client)
var payload = {
signature: signature,
timestamp: timestamp
};
// send it back to the client
response.json(payload);
}
^ I really think that snippet should be included in the Node SDK Github README. It's kind of like the most basic necessary thing, shouldn't be hidden in support forums.
Thank you for sharing this, Brian! I'll forward this snippet to our SDK team to review. We really appreciate your feedback.
Ok, I have this payload object. How do I use this with the http endpoint now???
Just to further what Brian has done, this is what I ended up with.
On the server side (configured with CLOUDINARY_URL env):
Thanks for the adding the clarification!
We will review this and see how it fits with our documentation.
How do you use the signature on the client side? My POST request fails with a 400 'upload_preset' is missing apparently. While I'm specifically trying to use a signed upload (ie no upload_presets)...
Hi Mathieu,
You can perform a client-side signed upload but the signature generation should be done on server-side and include a signed upload preset.
Please sign in to leave a comment.