A module heavily inspired (and copied) by Cloudinary JS and Cloudinary Angular but without any non-angular dependency.
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.
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.
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="">
Released under the MIT license.