Node.js integration

Overview

Cloudinary is a cloud-based service that provides an end-to-end image and video management solution. The Node.js SDK provides simple, yet comprehensive file upload, administration, manipulation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing Node.js application.

Quick example: Image transformation

The following Node.js code generates an https delivery URL for image below including all of the following transformations:

  • Thumbnail crop to a size of 150x150 pixels using face detection gravity to automatically determine the location for the crop
  • Rounded corners with a 20 pixel radius
  • Sepia effect
  • Overlay of the Cloudinary logo on the southeast corner (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness, and partial transparency (opacity = 60%)
  • Rotated by 10 degrees
  • Converted to and delivered in PNG format (the originally uploaded image was a JPG)
cloudinary.image("front_face.png", 
             {
              secure: true, transformation: [
                { width: 150, height: 150, crop: 'thumb', gravity: 'face', radius: 20, effect: 'sepia' },
                { overlay: 'cloudinary_icon', gravity: 'south_east', x: 5, y: 5, opacity: 60, 
                    effect: 'brightness:200' },
                { angle: 10 }                  
              ]
             })
 // This code outputs the following URL:
 // https://res.cloudinary.com/demo/image/upload/w_150,h_150,c_thumb,g_face,r_20,e_sepia/l_cloudinary_icon,g_south_east,x_5,y_5,w_50,o_60,e_brightness:200/a_10/front_face.png
150x150 PNG

Quick example: File upload

The following Node.js code uploads the dog.mp4 video to the specified account sub-folder using the public_id, my_dog. The video will overwrite the existing my_dog video if it exists. When the video upload is complete, the specified notification URL will receive details about the uploaded media asset.

cloudinary.v2.uploader.upload("dog.mp4", 
  {resource_type: "video", public_id: "public_id: "my_folder/my_sub_folder/my_dog",
  overwrite: true, notification_url: "http://mysite/notify_endpoint"},
  function(error, result) {console.log(result, error)});

Node.js Library Features

Cloudinary provides an open source Node module for further simplifying the integration with your Node applications:

  • Build URLs for transformation & manipulation
  • Node.js helper methods for embedding and transforming images and videos
  • API wrappers: file upload, administration, sprite generation and more
  • Server-side file upload + direct unsigned file upload from the browser using the jQuery plugin

Node.js capitalization and data type guidelines

When using the Node.js SDK, keep these guidelines in mind:

  • Parameter names: snake_case. For example: public_id
  • Classes: PascalCase. For example: PreloadedFile
  • Methods: snake_case. For example: image_upload_tag
  • Pass parameter data as: Object

Node.js - Getting started guide

1Installation

Cloudinary's Node.js integration library is available as an open-source NPM.

To install the Cloudinary NPM, run:

npm install cloudinary

Include Cloudinary's Node.js classes in your code:

var cloudinary = require('cloudinary');

2Configuration

Your cloud_name account parameter is required to build URLs for your media assets. api_key and api_secret are further needed to perform secure API calls to Cloudinary (e.g., image and video uploads). 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 an environment variable or the 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 Node application:

cloudinary.config({ 
  cloud_name: 'sample', 
  api_key: '874837483274837', 
  api_secret: 'a676b67565c6767a6767d6767f676fe1' 
});

See Configuration options for more details and additional configuration methods.

3Upload images and videos

You can upload images, videos or any other files from your Node.js server. Uploading is done over HTTPS using a secure protocol based on the api_key and api_secret parameters you provide.

The following command uploads a local image file to Cloudinary:

cloudinary.uploader.upload("my_picture.jpg", function(result) { 
  console.log(result) 
});

Alternatively, you can a specify a local path, a public HTTP URL, an S3 URL, an IO stream or an actual image file's data. For example:

cloudinary.uploader.upload("http://www.example.com/image.jpg", function(result) { 
  console.log(result) 
});

Each media asset uploaded to Cloudinary is assigned a unique Public ID and is available for immediate delivery and transformation. The upload method returns an associative array with content similar to that shown in the following example:

{ 
  public_id: 'sample',
  version: 1312461204,
  width: 864,
  height: 576,
  format: 'jpg',
  bytes: 120253,
  url: 'https://res.cloudinary.com/demo/image/upload/v1371281596/sample.jpg',
  secure_url: 'https://res.cloudinary.com/demo/image/upload/v1371281596/sample.jpg' 
}

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

cloudinary.uploader.upload(
  req.files.myImage.path,
  function(result) { console.log(result); },
  {
    public_id: 'sample_id', 
    crop: 'limit',
    width: 2000,
    height: 2000,
    eager: [
      { width: 200, height: 200, crop: 'thumb', gravity: 'face',
        radius: 20, effect: 'sepia' },
      { width: 100, height: 150, crop: 'fit', format: 'png' }
    ],                                     
    tags: ['special', 'for_homepage']
  }      
)

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

4Display and manipulate images and video

Adding images and video to your Node.js application is quite straightforward. Just use the image or video method of the cloudinary class. This method generates the full source URL based on the given parameters and adds the image or video to your HTML code:

For example, displaying 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 src='https://res.cloudinary.com/demo/image/upload/c_fill,h_150,w_100/sample.jpg' 
     width='100' height='150' />

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

You can easily convert formats, resize, perform face detection-based image 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:

cloudinary.image("billclinton.jpg", {
  type: 'facebook',
  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 Node.js, see Node.js image manipulation and Node.js video manipulation.

5Sample projects

To find additional useful code samples and learn how to integrate Cloudinary with your Node applications, take a look at our Sample Projects.

Basic Node.js sample: Uploading local and remote images to Cloudinary and generating various transformation URLs.

Node.js Photo Album: A fully working web application that allows you to uploads photos, maintain a database with references to them, list them with their metadata, and display them using various cloud-based transformations. Image uploading is performed both from the server side and directly from the browser using a 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 Node.js image upload and Node.js video upload .

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

Browse additional Node.js integration topics: configuration, migration, Admin API, etc.

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