How to implement jQuery direct upload to Cloudinary on node.js

Question

I'm trying to implement direct uploads to Cloudinary via their jQuery plugin to a Node.js application, and am wondering if anyone can help me close some gaps in their examples.

Here's the blog post that explains how to do it:

http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

In the "Other development frameworks and advanced usage" section, the part I'm stuck on is:

• "Set data-form-data to be JSON representation of the upload API params. The mandatory fields are api_key, timestamp, signature and callback.",

and more specifically:

• "The signature needs to be generated on the server-side for correct authentication."

There doesn't seem to be any example of exactly how to achieve this.

The examples are:

<input name="file" type="file" 
       class="cloudinary-fileupload" data-cloudinary-field="image_upload" 
       data-form-data=" ... html-escaped JSON data ... " ></input>

and the unescaped JSON content of data-form-data is:

{ "timestamp":  1345719094, 
  "callback": "https://www.example.com/cloudinary_cors.html",
  "signature": "7ac8c757e940d95f95495aa0f1cba89ef1a8aa7a", 
  "api_key": "1234567890" }

How do you go about generating the signature? I understand I need to do this in node.js, and it seems like it needs to happen when the form is generated, although from what I can tell the signature needs to include the timestamp - which would surely be outdated by the time the user has filled out the form?

The documentation for request authentication is here: http://cloudinary.com/documentation/upload_images#request_authentication

In the cloudinary_npm module, which I am using, there is a method in uploader.coffee called direct_upload which seems like a helper to make this happen, but I'm not clear on how to actually bind it all together.

The two frameworks with real examples in the blog post, Rails and Django, abstract this complexity through their own helpers, e.g. in Django you add {{ form.image }} to your form, which outputs the result from image = cloudinary.forms.CloudinaryJsFileField() - unfortunately how to replicate this in any other server-side environment is not covered.

If anyone can shed any light on this, or share a gist or example on how to make it work end-to-end, I'd greatly appreciate it.

Answer 1

Please take a look at the uploader.image_upload_tag at https://github.com/cloudinary/cloudinary_npm/blob/67b7096c7fac2c2bed06603912966495d59dfa34/lib/uploader.coffee#L220 It returns the html for an input tag that can be used together with jquery.cloudinary.js to upload images directly to cloudinary. It will be part of the next release of the npm (expected sometime next week). As for the timestamp - the signature is valid for 1 hour, so there should be plenty of time for the user to upload the image.