Cloudinary, jQuery and HTML to upload image

I have found the Cloudinary documentation poor. Here I have listed the code and steps to upload images to your cloudinary account using jQuery.

COPYING AND PASTING THIS WONT WORK, YOU MUST READ TEXT INSTRUCTIONS UNDERNEATH!

 

 

HTML and jQuery

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>JSP Page</title>

//PLACE OPENING SCRIPT TAG HERE

$(document).ready(function () {
// $(“#cloudinary-input”).attr(“data-form-data”, jsonData);
console.log(Math.floor(Date.now() / 1000));
});
function upload() {

var params = {
api_key: ‘1112222’,
public_id: ‘samplepublicid’,
timestamp: ‘1448741653’, //Math.floor(Date.now() / 1000);,
cloud_name: ‘mycloudname’,
signature: ‘9a19e11286b77e7e4f9ba2cb1f8dd4cb40cd67bc’

};

var input = $(“#cloudinary-input”);
input.attr(“data-form-data”, JSON.stringify(params));
input.bind(“fileuploaddone”, function (e, data) {
test(data);
});
input.cloudinary_fileupload();
input.fileupload(‘option’, ‘formData’).file;
input.fileupload(‘add’, {files: document.getElementById(“cloudinary-input”).files});
}

function test(data){
alert(‘success’);
}

//PLACE CLOSING SCRIPT TAG HERE

</head>
<body>
<h1>Hello World!</h1>
<form >
<input id=”cloudinary-input” name=”file” type=”file” class=”cloudinary-fileupload”
data-cloudinary-field=”image_upload”
data-form-data=”” />
<input id=”image_upload” type=”hidden” value=””/>
<input type=”button” value=”Upload” onclick=”upload()”/>
</form
<div class=”.cloudinary-fileupload” src=””/>
</body>
</html>

Ok, that is the base. Now read this:

You need to download the jquery files listed below and put them in the head of your HTML file. You can get them from Cloudinarys jQuery github js directory here. Make sure you have the src attribute pointing to where you’ve downloaded them.

Untitled

You need to customise the value of the ‘params’ object to match your own. A guide to where you can find the values is here:

  • api_key – You can see this in your cloudinary dashboard.
  • public_id – An optional attribute, make it up.
  • timestamp – This is a unix timestamp. you can generate it with the following javascript: Math.floor(Date.now() / 1000); YOUR TIMESTAMP CANNOT BE MORE THAN 1 HOUR OLD
  • cloud_name – This can be seen in your cloudinary dashboard too, at the time of writing, I saw it in the top right hand side of the screen.
  • signature  – THIS IS THE PART WHERE YOU NEED TO PAY ATTENTION. SEE BELOW

Generating a Signature for Cloudinary jQuery Call

  1. lay our the parameters you are using in a string as such: public_id=samplepublicid&timestamp=1448741653. The format is key=value&key=value. They must be in alphabetical order.
  2. In the cloudinary dashboard, find your ‘API Secret’. Assume my API secret is: ‘glenirissecret’.
  3. Tag your secret on to the end of your newly formed string, eg: public_id=samplepublicid&timestamp=1448741653glenirissecret
  4. Generate a SHA1 hash code. You can Google PHP or Java code to do this, however, you can also use this site to do so:     http://www.sha1-online.com/
  5. You should now have a hash value of 9a19e11286b77e7e4f9ba2cb1f8dd4cb40cd67bc
  6. The hash code you generate is now the value of your signature param.
  7. Substitute into your values to my code above and refresh the HTML. Upon uploading your image, you should see an alert box with ‘succcess’!

With inspiration and help from:

Cloudinary Support Form

Telerik Forum

Advertisements

Des Traynor – Product Strategy in a Growing Company – Dublin Web Summit

Attached is a pdf from Des Traynor of Intercom who gave a very interesting talk at the Dublin Web Summit 2014. Th etalk addressed the concerns of adding new features and functionality whilst developing a new software product.

DesTraynor-WebSummit-Final