Menu
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.
712
On the settings page, click on the upload tab, and scroll down to the upload presets section . Click on the bold text that says Enable unsigned uploading, this allows users to upload images and other assets into your Cloudinary account without pre-signing the upload request.
The setup process involves two simple steps: create an HTML form, add JavaScript code to it, and then integrate with Cloudinary's upload widget. Afterwards, all your users need to do is click the form for a dialog box in which to choose the file for upload.
You can view your base URLs and some sample URLs in the Account Details section in the Management Console. The base URL will also include your cloud name. For example, if your cloud name is 'demo', the base URLs will be: 'api.cloudinary.com/v1_1/demo/' - the base URL for accessing Cloudinary's secure API.
Download the Jquery SDK and the server sdk.
Here is the code with a java 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.
<!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.
186
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
41
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
