jQuery integration


Cloudinary is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, manipulations, optimizations and delivery.

With Cloudinary you can easily upload your media assets to the cloud and automatically perform smart image and video manipulations without installing any complex software. All your media resources are then seamlessly delivered through a fast CDN, optimized and using industry best practices. Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with new and existing web and mobile applications.

Quick example

Take a look at the following Cloudinary URL that generates the image below:

Simply accessing the above URL told Cloudinary to transform an uploaded image, create a 150x150px thumbnail using face detection based cropping, round the image's corners, add a sepia effect, convert it to a transparent PNG format, add a watermark layer, rotate the image by 10 degrees and ultimately delivered the resulting image through a fast CDN using smart caching techniques.

jQuery Plugin Features

Cloudinary provides a jQuery plugin (open source) for further simplifying the integration:

  • Build URLs for transformation & manipulation.
  • Javascript helper methods for embedding and transforming images.
  • Direct uploading from the browser.

Note: The Javascript library has undergone an extensive redesign.

Up until now, the library was deeply coupled with jQuery and the Blueimp jQuery File Upload plugin. In order to cater for developers who do not wish to use jQuery, the library is now available in three different flavors:

  • Core JavaScript Library: The core Cloudinary JavaScript library which does not depend on jQuery.
  • jQuery Plugin: If you are using jQuery, you can take advantage of the Cloudinary jQuery plugin which includes all the functionality of the Core JavaScript Library.
  • jQuery File Upload: The Cloudinary jQuery File Upload library extends the Cloudinary jQuery plugin that utilizes the Blueimp jQuery File Upload library. This library includes all the functionality of the Core JavaScript Library and the jQuery plugin.

The redesigned jQuery File Upload library (the 3rd option above) is fully backwards compatible with previous versions of the jQuery plugin. The documentation on this page is still relevant and will be updated in the near future to reflect the additional functionality of the library.

jQuery - Getting started guide


Cloudinary's Javascript integration library is available as an open-source jQuery plugin.

You can download jquery.cloudinary.js from the js folder of the GitHub project. In your HTML pages, include jquery.cloudinary.js after including the jQuery library.

<script src='jquery.min.js' type='text/javascript'></script>
<script src='jquery.cloudinary.js' type='text/javascript'></script>

If you want to perform direct uploading from the browser, download the following files from the js folder of the GitHub project as well. These files belong to the jQuery File Upload plugin.


Include all required jQuery files in your HTML page:

<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>


Your cloud_name account parameter is required to build image URLs. The public api_key is needed to perform direct uploading to Cloudinary (e.g., image uploads). The private api_secret parameter should not be included in your client-side HTML or Javascript code. See Account and API setup for more details.

Setting the configuration parameters can be done either programmatically in each call to a Cloudinary method or globally using the $.cloudinary.config method.

You can find your configuration parameters in the dashboard of our Management Console.

Here's an example of setting configuration parameters globally in your Javascript code:

$.cloudinary.config({ cloud_name: 'sample', api_key: '874837483274837'})

3Upload media assets

You can upload images, videos, or any other files directly from the browser to Cloudinary. Uploading is done over HTTPS using a secure protocol based on the api_key and api_secret parameters of your account.

However, Cloudinary requires upload requests to be signed with your private api_secret, which should not be exposed in public web pages. Therefore, a signature needs to be generated in your server-side application for authorizing direct uploading.

You can use Cloudinary's helper methods for generating the signature in various server frameworks: Ruby on Rails, PHP, Django and Node.js.

The following file input tag will be automatically converted by Cloudinary's jQuery plugin to perform direct uploading to the cloud:

<input name="file" type="file" 
   class="cloudinary-fileupload" data-cloudinary-field="image_id" 
   data-form-data=" ... html-escaped JSON data ... " ></input>

The unescaped JSON content of data-form-data includes all upload parameters and the signature for authorizing upload. Here's an example:

  "timestamp":  1345719094, 
  "callback": "https://www.example.com/cloudinary_cors.html",
  "signature": "7ac8c757e940d95f95495aa0f1cba89ef1a8aa7a", 
  "api_key": "1234567890" 

Users can upload one or more images or non-image files. Alternatively, you can specify a remote HTTP URL for uploading resources. Each media asset uploaded to Cloudinary is assigned a unique Public ID and is available for immediate delivery and transformation. The upload method returns a hash with content similar to that shown in the following example:

 url: 'http://res.cloudinary.com/demo/image/upload/v1371281596/sample.jpg',
 public_id: 'sample',
 version: '1312461204',
 format: 'jpg',
 width: 864,
 height: 564,
 bytes: 120253       

As you can see in the following form data example, with a single call you can define your own Public ID, apply an incoming transformation before storing the resource file in the cloud, generate derived resources eagerly and assign tags to uploaded resources:

  "api_key": "1234567890",
  "callback": "https://www.example.com/cloudinary_cors.html",
  "eager": "c_thumb,g_face,h_200,w_200|c_fit,f_png,h_150,w_100",
  "public_id": "sample_id",
  "signature": "f5caf4b413d9f9a0008ba4dd42ae04eabcdb9f74",
  "timestamp": 1372419182,
  "transformation": "c_limit,h_2000,w_1200",
  "tags": "special,for_homepage"

Many more upload options as well as direct uploading from the browser are detailed here: jQuery image upload and jQuery video upload.

4Display and manipulate images and videos

Adding images and video to your Java application is quite straightforward.

For example, you can use the $.cloudinary.image helper method. This method generates the full image resource URL based on the given parameters and creates an IMG tag you can add to to your HTML code:

Here we display the uploaded image with the sample public ID, while providing an alternate text:

$.cloudinary.image('sample.jpg', { alt: "Sample Image" });
864x576 JPG (Scaled down)

Now, let's say that you wish to display a small thumbnail of this uploaded image. Simply add the transformation instructions to your call. For example, displaying the 'sample' image transformed to fill a 100x150 rectangle:

$.cloudinary.image('sample.jpg', { width: 100, height: 150, crop: 'fill' });
100x150 JPG

This is equivalent to:

<img width="100" height="150" 

Using simple parameters you can perform powerful manipulations. The jQuery plugin builds Cloudinary URLs that you can embed in your web and mobile views for dynamically transforming your uploaded resoueces in the cloud and delivering the results through a fast CDN with advanced caching.

You can easily convert formats, resize, perform face detection-based cropping, apply effects and filters, append textual layers or watermarks and more.

The following command, for example, embeds a JPG thumbnail of a profile photo fetched from Facebook in real-time, crops it to a circle, applies a sepia effect and delivers it optimized through a CDN:

  { width: 90, height: 98, 
    crop: 'fill', gravity: 'face',
    radius: 'max', effect: 'sepia' });
90x98 JPG

For more information about supported transformations and their usage, refer to Image transformations and Video manipulation and delivery.

For more details about Cloudinary's transformation and manipulation in jQuery, see jQuery image manipulation and jQuery video manipulation.

5Sample projects

To find additional useful code samples and learn how to integrate Cloudinary with your web applications, take a look at our sample projects for Ruby on Rails, PHP and Django.

You should also take a look at the following fully working example that performs direct uploading from the browser with uploading progress and preview with advanced transformations and embeds in a dynamic HTML page using Cloudinary's jQuery plugin.

6What's next

Sign up for a free account if you haven't done so already. Follow the steps above and try Cloudinary out. Finished all steps? That's just an example of what Cloudinary can offer. Here's some additional reading material to help you get the best out of Cloudinary:

Learn more about jQuery image upload and jQuery video upload .

Explore powerful jQuery image manipulation and jQuery video manipulation features and see our Image transformations and Video manipulation and delivery docs.

Stay tuned for updates, tips and tutorials: Blog, Twitter, Facebook.