How to use Cloudinary jQuery plugin to upload images directly from a page?

Question

Beginner's question here.

I'm trying to upload the photo from a webpage directly to cloudinary.

Here is the jQuery plugin that Cloudinary recommends to use.

Unfortunately the plugin is not documented yet, and doesn't have a clear "example.html" file. I've tried to get my head around the plugin code, but with no success so far.

Can somebody point me to the right direction in terms of what "example.html" should look like?

Thanks.

mcbjam · Answer 1 · 2014-04-21T20:37:49.817

Download the Jquery SDK and the server sdk.

Here is the code with a java server side :

Generating the signature on server side :

Here is the JSP code in java :

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.Map" %> 
<%@ page import="java.util.HashMap" %> 
<%@ page import="java.sql.Timestamp" %> 
<%@ page import="com.cloudinary.Cloudinary" %> 
<%
String timestamp=(new Long(System.currentTimeMillis() / 1000L)).toString();
Cloudinary cloudinary = new Cloudinary("cloudinary://CLOUDINARY_URL");
Map<String, Object> params = new HashMap<String, Object>();
Map options = Cloudinary.emptyMap();
boolean returnError = Cloudinary.asBoolean(options.get("return_error"), false);
String apiKey = Cloudinary.asString(options.get("api_key"), cloudinary.getStringConfig("api_key"));
if (apiKey == null)
    throw new IllegalArgumentException("Must supply api_key");
String apiSecret = Cloudinary.asString(options.get("api_secret"), cloudinary.getStringConfig("api_secret"));
if (apiSecret == null)
    throw new IllegalArgumentException("Must supply api_secret");
params.put("callback", "http://www.mcbjam.com/Scripts/vendor/cloudinary/html/cloudinary_cors.html");
params.put("timestamp", timestamp);
String expected_signature = cloudinary.apiSignRequest(params, apiSecret);%>

You can have the CLOUDINARY_URL on your Cloudinary Dashboard. I use the cloudinary.apiSignRequest method wich is include in server cloudinary sdk. I sign the callback and the timestamp.

The HTML and Javascript

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
    <script src="../Scripts/vendor/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/vendor/cloudinary/jquery.ui.widget.js"></script>
    <script src="../Scripts/vendor/cloudinary/jquery.iframe-transport.js"></script>
    <script src="../Scripts/vendor/cloudinary/jquery.fileupload.js"></script>
    <script src="../Scripts/vendor/cloudinary/jquery.cloudinary.js"></script> 
</head>
<body>
<script type="text/javascript">
   $.cloudinary.config({"api_key":"YOUR_API_KEY","cloud_name":"YOUR_CLOUD_NAME"});
</script> 
<input name="file" type="file" id="uploadinput"
       class="cloudinary-fileupload" data-cloudinary-field="image_upload" 
       data-form-data="" ></input>
<script>
var data = { "timestamp":  <%= timestamp %>, 
          "callback": "http://YOUR_DOMAIN/cloudinary_cors.html",
          "signature": "<%= expected_signature %>", 
          "api_key": "YOUR API KEY" };    
$('#uploadinput').attr('data-form-data', JSON.stringify(data));
</script>
</body>
</html>

Put the cloudinary_cors.html on your host and modify the path on the html. Set your APIKEY and your cloud name.

<%= timestamp %> and <%= expected_signature %> are the element calculate on java. ( You can do the same on php).

I use this code on my website here http://paint.mcbjam.com You have more details here : http://mcbjam.blogspot.fr/2013/05/integrer-cloudinary-pour-realiser-des.html in French.

Thankyou for your answer and the link to the backend java. Your code is clean and simple to understand. — Ankur, Sep 29 '13 at 22:27

score 2 · Answer 2 · answered Aug 29 '12 at 15:33

2

Please see the recently published blog post that covers direct uploading from the browser to Cloudinary using jQuery: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

answered Aug 29 '12 at 15:33

Cloudinary

541
3
4

10

It would be nice if Cloudinary had bare bones examples available on, say, github. For Django, a simple example app would go a long ways towards simplifying integration. Love the service, but it could use some improved documentation. – Erik Sep 11 '12 at 01:29
1

I agree. The blog post makes it magically easy for rails and django, but leaves a lot to be learned the hard way for any other platform. I'm currently trying to get it working on a node.js backend and am stumped by how to generate the signature. A simple end-to-end sample would go a *long* way. – Jed Watson Oct 26 '12 at 03:58
The linked blog post is helpful, but not complete. For example "render_to_response" isn't defined correctly, and the variable "p" is used before being set. A full example would be very helpful. – johntellsall Mar 12 '13 at 18:47

score 1 · Answer 3 · edited May 23 '17 at 12:32

You cannot upload images to Cloudinary just by using plain html. You'll need a server that signs your request params. So,here is your example.html file:

<html>
        <head>
            <title></title>
            <script src='jquery.min.js' type='text/javascript'></script>
            <script src='jquery.ui.widget.js' type='text/javascript'></script>
            <script src='jquery.iframe-transport.js' type='text/javascript'></script>
            <script src='jquery.fileupload.js' type='text/javascript'></script>
            <script src='jquery.cloudinary.js' type='text/javascript'></script>
            <script type = "text/javascript">
                $.cloudinary.config({ cloud_name: 'sample', api_key: '874837483274837'});
            </script>
        </head>
        <body>
            <input name="file" type="file" 
               class="cloudinary-fileupload" data-cloudinary-field="image_id" 
               data-form-data="--signedData--" />
        </body>
</html>

Note: The signedData in data-form-data attribute is a JSONObject generated by a server-side code which includes a sha1Hex signature of your request parameters.

An example of that would look like:

{
    "api_key": "874837483274837",
    "timestamp": "1234567890",
    "public_id": "sample",
    "signature": "de9f2c7fd25e1b3afad3e85a0bd17d9b100db4b3"
}

Also, let me make you clear that you don't need any other buttons to upload the file, just choosing the file would trigger the jQuery event and send the request parameters to Cloudinary.

You can find about generating signature on java here.

Cloudinary has a feature called "unsigned uploads" that allows you to do this without server-side signing. — Alex Sharp, Mar 09 '16 at 00:06

How to use Cloudinary jQuery plugin to upload images directly from a page?

3 Answers3

Generating the signature on server side :

The HTML and Javascript

Linked