How to use Cloudinary jQuery plugin to upload images directly from a page?
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.
Answer
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.