landofcash/angular-cloudinary

AngularJS only module to handle Cloudinary image upload and display with no jQuery dependency

AngularJS Cloudinary

A module heavily inspired (and copied) by Cloudinary JS and Cloudinary Angular but without any non-angular dependency.

Usage

This package is available via Bower:

$ bower install --save angular-cloudinary

Include the following in your HTML:

<script src="/bower_components/ng-file-upload/ng-file-upload-shim.js"></script>
<script src="/bower_components/ng-file-upload/ng-file-upload.js"></script>
<script src="/bower_components/angular-cloudinary/angular-cloudinary.js"></script>

Note that you might need to follow ng-file-upload setup instructions as well.

Upload

You can now capture file input to an angular model and then, in your controller:

angular
// Include the angular-cloudinary module
.module('myModule', ['angular-cloudinary'])
// Configure the cloudinary service
.config(function (cloudinaryProvider) {
  cloudinaryProvider.config({
    upload_endpoint: 'https://api.cloudinary.com/v1_1/', // default
    cloud_name: 'my_cloudinary_cloud_name', // required
    upload_preset: 'my_preset', // optional
  });
})
// Inject the `cloudinary` service in your controller
.controller('myController', function($scope, cloudinary) {
  // Have a way to see when a file should be uploaded
  $scope.$watch('myFile', function(myFile) {
    // Use the service to upload the file
    cloudinary.upload(myFile, { /* cloudinary options here */ })
    // This returns a promise that can be used for result handling
    .then(function (resp)) {
      alert('all done!');
    };
  });
});

You might want to use Cloudinary signed presets for security reason. You will need to generate a signed set of cloudinary options with any of the backend Cloudinary library and return that to your client AngularJS application so that it can be fed to cloudinary.upload's options.

Display a Cloudinary image

To view an image you usually want to use the cl-src directive as documented in Cloudinary Angular. The version in this repository has some additions like:

• better sorting of transformation attributes to generate valid Cloudinary urls
• using dpr="auto" will auto-detect the current browser retina pixel ratio

A full list of available attributes documentation might be available in the future.

<img cl-src="my_image_public_id"
  width="100"
  height="100"
  crop="fill"
  dpr="auto"
  fetch-format="auto"
  alt="">

License

Released under the MIT license.