All geek questions in one place

How to use jQuery cloud plugin to download images directly from a page?

Beginner question here.

I am trying to upload a photo from a webpage directly to cloudinary .

Here is the jQuery plugin that recommends using Cloudaign.

Unfortunately, the plugin is not yet documented and does not have a clear example.html file. I tried to plunge into the plugin code, but have not yet succeeded.

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

Thanks.

+6
source share
3 answers

Download the sdk server SDK and jQuery.

Here is the code from the java server side:

Creating a server side signature:

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 may have CLOUDINARY_URL on your cloud dashboard. I use the cloudinary.apiSignRequest method, which is included in the server cloud sdk. I am signing a callback and timestamp.

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 cloudinary_cors.html on your host and change the path to html. Set APIKEY and your cloud name.

<% = timestamp%> and <% = expected_signature%> are elements calculated by java. (You can do the same in php).

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

+4
source

Please view a recently posted blog post that contains direct download from a browser to Cloudinary using jQuery: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

+2
source

You cannot upload images to Cloudinary just using simple html. You will need a server that signs your request parameters. 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 attribute in data-form-data is a JSONObject generated by server-side code that includes the sha1Hex signature of your request parameters.

An example of this would look like this:

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

In addition, let me make it clear that you do not need any other buttons to download the file, just selecting the file will result in a jQuery event and sending the request parameters to Cloudinary.

You can find about creating a signature in java here .

+1
source

Source: https://habr.com/ru/post/923186/

More articles:


All Articles