CODEWITHSUNDEEP
ruby-on-railsbackbone.jscloudinary
Tom Hammond
Tom Hammond

Reputation: 6080

Rails Upload Image to Cloudinary

I'm trying to upload images to Cloudinary from the client side Backbone app.

Their documentation shows that you should create the input like this:

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

The JSON for the example:

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

The piece I'm struggling with is how do I generate the signature? Their documentation says you have to generate it on the server side, but I can't seem to find out how to do that in their documentation.

Also, the end goal is to assign the returned image URL as a model attribute. How would I go about accessing the returned image URL so that I can do a model.save(image: returnedImage) to save it back to my server?

Upvotes: 0

Views: 274

Answers (1)

Itay Taragano
Itay Taragano

Reputation: 1931

Here's Cloudinary's documentation regarding how to generate the signature: http://cloudinary.com/documentation/upload_images#request_authentication

While the signature is based on your account's api_secret, which should not be revealed in your client-side code, you should generate the signature on the server-side. Cloudinary's client integration libraries include helper methods for generating the signature. e.g., (in Rails): https://github.com/cloudinary/cloudinary_gem/blob/c3aa5dd4aa9c7a55159d88b1221271f351324475/lib/cloudinary/utils.rb#L203

You can also use the libraries to generate the image upload tag which automatically takes care of the signature generation for you: http://cloudinary.com/documentation/rails_image_upload#direct_uploading_from_the_browser

In addition, you might want to consider using unsigned uploads, you can also upload to Cloudinary without generating a signature: http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud

Upvotes: 1

Related Questions