.NET integration

Overview

Cloudinary is a cloud-based service that provides an end-to-end image and video management solution. The .NET 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 .NET application.

Quick example: Image transformation

The following .NET 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)
@Model.Cloudinary.Api.UrlImgUp
  .Transform(new CloudinaryDotNet.Transformation().Width(150).Height(150).Gravity("face")
     .Radius(20).Effect("sepia")
  .Chain().Overlay("cloudinary_icon").Gravity("south_east").X(5).Y(5).Opacity(60)
     .Effect("brightness:200")
  .Chain().Angle(10))
  .Secure(true)
  .BuildImageTag("front_face.png");

 // 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 .NET 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.

var uploadParams = new VideoUploadParams()
  {
    File = new FileDescription(@"dog.mp4"),
    ResourceType = "video"
    PublicId = "my_folder/my_sub_folder/my_dog",
    Overwrite = true,
    NotificationUrl = "http://mysite/my_notification_endpoint"
  };
  var uploadResult = cloudinary.Upload(uploadParams);

.NET Library Features

Cloudinary provides an open source .NET library for further simplifying the integration:

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

The library is built for .NET Framework 4.x. You can use any .NET language with the library. The library itself is written in C#. Our documentation includes examples both in C# and VB.NET.

.NET capitalization and data type guidelines

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

  • Parameter names: PascalCase. For example: PublicId
  • Classes: PascalCase. For example: ImageUploadResults
  • Methods: PascalCase. For example: GetCloudinaryJsConfig
  • Pass parameter data as: Typed

.NET - Getting started guide

1Installation

The easiest way to start using Cloudinary's .NET library is to use Visual Studio and NuGet Package Manager. Please see NuGet Documentation for instructions of how to use NuGet packages. Below are the steps required to start a new project using Visual Studio and Cloudinary's .NET library.

  • Download NuGet Package Manager at http://visualstudiogallery.msdn.microsoft.com/27077b70-9dad-4c64-adcf-c7cf6bc9970c.
  • Use Visual Studio to create a new project and choose the relevant .NET 4.x version as the target framework.
  • Right click on the project in the Solution Explorer window and click on the menu item 'Manage NuGet packages...'
  • Type CloudinaryDotNet in the search box at the upper right corner.
  • When CloudinaryDotNet package appears, click on the Install button.
  • After the package is installed, click the Close button.

Use CloudinaryDotNet and CloudinaryDotNet.Actions namespaces in your code:

For C#:

using CloudinaryDotNet;
using CloudinaryDotNet.Actions;

For VB.NET:

Imports CloudinaryDotNet
Imports CloudinaryDotNet.Actions

The library contains powerful helper methods for using directly from views. This documentation provides examples of the integration with Cloudinary's .NET library for the ASP.NET MVC v4.0 framework, for both Razor and ASPX view engines.

Using namespaces in view code:

For Razor/C#:

@using CloudinaryDotNet
@using CloudinaryDotNet.Actions

For Razor/VB.NET:

@Imports CloudinaryDotNet
@Imports CloudinaryDotNet.Actions

For ASPX (C# and VB.NET):

<%@ Import Namespace="CloudinaryDotNet" %>
<%@ Import Namespace="CloudinaryDotNet.Actions" %>

2Configuration

Your CloudName account parameter is required to create an instance of the Cloudinary class, which is the main entry point for using the library. The 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 using a constructor of the Cloudinary class or globally using an environment variable.

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

Here's an example of setting configuration parameters in your .NET application:

For C#:

Account account = new Account(
  "my_cloud_name",
  "my_api_key",
  "my_api_secret");

Cloudinary cloudinary = new Cloudinary(account);

For VB.NET:

Dim account = New Account(
  "my_cloud_name",
  "my_api_key",
  "my_api_secret")
  
Dim cloudinary = New Cloudinary(account)

See Configuration options for more details and additional configuration methods.

3Upload media assets

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

The following snippet uploads a local file to Cloudinary:

For C#:

var uploadParams = new ImageUploadParams()
{
  File = new FileDescription(@"mypicture.jpg")
};
var uploadResult = cloudinary.Upload(uploadParams);

For VB.NET:

Dim uploadParams = New ImageUploadParams
uploadParams.File = New FileDescription("mypicture.jpg")
Dim uploadResult = m_cloudinary.Upload(uploadParams)

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

For C#:

var uploadParams = new ImageUploadParams()
{
  File = new FileDescription(@"http://www.example.com/image.jpg")
};
var uploadResult = cloudinary.Upload(uploadParams);

For VB.NET:

Dim uploadParams = New ImageUploadParams
uploadParams.File = New FileDescription("http://www.example.com/image.jpg")
Dim uploadResult = m_cloudinary.Upload(uploadParams)

Each media asset uploaded to Cloudinary is assigned an unique Public ID and is available for immediate delivery and transformation. The upload method returns an instance of ImageUploadResult class that contains a set of properties of the uploaded image, including the image URL and Public ID.

In addition, the result contains the StatusCode property of type System.Net.HttpStatusCode for handling errors and the JsonObj property of type Newtonsoft.Json.Linq.JToken, which is a raw JSON object of upload response returned by Cloudinary's service. The JSON object is an associative array with content similar to the example below:

 RESPONSE (ImageUploadResult):
 {
  "public_id":"tquyfignx5bxcbsupr6a",
  "version":1375302801,
  "signature":"52ecf23eeb987b3b5a72fa4ade51b1c7a1426a97",
  "width":1920,
  "height":1200,
  "format":"jpg",
  "resource_type":"image",
  "created_at":"2017-07-31T20:33:21Z",
  "bytes":737633,
  "type":"upload",
  "url":
   "https://res.cloudinary.com/demo/image/upload/v1375302801/tquyfignx5bxcbsupr6a.jpg",
  "secure_url":
   "https://res.cloudinary.com/demo/image/upload/v1375302801/tquyfignx5bxcbsupr6a.jpg"
 }

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

For C#:

var cloudinary = new Cloudinary(
  new Account(
    "my_cloud_name",
    "my_api_key",
    "my_api_secret"));
    
var uploadParams = new ImageUploadParams()
{
  File = new FileDescription(@"C:\mypicture.jpg"),
  PublicId = "sample_id",
  Transformation = new Transformation().Crop("limit").Width(40).Height(40),
  EagerTransforms = new List<Transformation>()
  {
    new Transformation().Width(200).Height(200).Crop("thumb").Gravity("face").
      Radius(20).Effect("sepia"),
    new Transformation().Width(100).Height(150).Crop("fit").FetchFormat("png")
  },
  Tags = "special, for_homepage"
};

var uploadResult = cloudinary.Upload(uploadParams);

For VB.NET:

Dim account = New Account(
  "my_cloud_name",
  "my_api_key",
  "my_api_secret")
  
Dim cloudinary = New Cloudinary(account)
Dim uploadParams = New ImageUploadParams
uploadParams.File = New FileDescription("C:\mypicture.jpg")
uploadParams.PublicId = "sample_id"
uploadParams.Transformation =
  New Transformation().Crop("limit").Width(40).Height(40)
uploadParams.EagerTransforms = New List(Of Transformation)
uploadParams.EagerTransforms.Add(
  New Transformation().Width(200).Height(200).Crop("thumb").Gravity("face").
    Radius(20).Effect("sepia"))
uploadParams.EagerTransforms.Add(
  New Transformation().Width(100).Height(150).Crop("fit").FetchFormat("png"))
uploadParams.Tags = "special, for_homepage"

Dim uploadResult = m_cloudinary.Upload(uploadParams)

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

4Display and manipulate images and videos

You can access uploaded images and videos using a URL that you obtain from an instance of the ImageUploadResult class after uploading, or you can build it using various helper methods of the Url class, which can be accessed via an instance of the Api class through an instance of the Cloudinary class.

For example, the BuildImageTag method generates an HTML image tag with an image delivery URL based on the given parameters.

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

// Razor (C# and VB.NET):
@Model.Cloudinary.Api.UrlImgUp.BuildImageTag("sample.jpg",
  new CloudinaryDotNet.StringDictionary("alt=Sample Image"))

// ASPX (C# and VB.NET):
<%: Model.Cloudinary.Api.UrlImgUp.BuildImageTag("sample.jpg",
  new CloudinaryDotNet.StringDictionary("alt=Sample Image")) %>
864x576 JPG (Scaled down)

After the Cloudinary class is instantiated, you should add it to your model in order to use the instance in your view or wrap it with singleton.

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:

// Razor (C# and VB.NET):
@Model.Cloudinary.Api.UrlImgUp.Transform(
  new Transformation().Width(100).Height(150).Crop("fill")).BuildImageTag("sample.jpg")
  
// ASPX (C# and VB.NET):
<%: Model.Cloudinary.Api.UrlImgUp.Transform(
  new Transformation().Width(100).Height(150).Crop("fill")).BuildImageTag("sample.jpg") %>
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 .NET 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 cropping, apply effects and filters, append textual layers or watermarks and more.

The following example code 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:

// Razor/C#:
@Model.Cloudinary.Api.UrlImgUp.Action("facebook").Transform(
  new Transformation()
    .Width(90)
    .Height(98)
    .Crop("fill")
    .Gravity("face")
    .Radius("max")
    .Effect("sepia"))
  .BuildImageTag("billclinton.jpg")

// Razor/VB.NET:
@Model.Cloudinary.Api.UrlImgUp.Action("facebook").Transform(
  New Transformation() _
    .Width(90) _
    .Height(98) _
    .Crop("fill") _
    .Gravity("face") _
    .Radius("max") _
    .Effect("sepia")) _
  .BuildImageTag("billclinton.jpg")

// ASPX/C#:
<%: Model.Cloudinary.Api.UrlImgUp.Action("facebook").Transform(
  new Transformation()
    .Width(90)
    .Height(98)
    .Crop("fill")
    .Gravity("face")
    .Radius("max")
    .Effect("sepia"))
  .BuildImageTag("billclinton.jpg") %>

// ASPX/VB.NET:
<%: Model.Cloudinary.Api.UrlImgUp.Action("facebook").Transform(
  New Transformation() _
    .Width(90) _
    .Height(98) _
    .Crop("fill") _
    .Gravity("face") _
    .Radius("max") _
    .Effect("sepia")) _
  .BuildImageTag("billclinton.jpg") %>
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 .NET, see .NET image manipulation and .NET video manipulation.

5Sample projects

To find additional useful code samples and learn how to integrate Cloudinary with your .NET applications, take a look at our Sample Projects. These projects are based on the ASP.NET MVC v4.0 framework and Razor view engine.

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

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 .NET image upload and .NET video upload .

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

Browse additional .NET integration topics: configuration, Admin API, etc.

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