cloudinary / cloudinary_angular

Cloudinary Angular client library

Cloudinary Angular SDK

About

NOTE-IMPORTANT: This is a legacy package, please find latest at https://github.com/cloudinary/frontend-frameworks/tree/master/packages/angular

The Cloudinary Angular SDK allows you to quickly and easily integrate your application with Cloudinary. Effortlessly optimize, transform, and manage your cloud's assets.

Note

This Readme provides basic installation and usage information. For the complete documentation, see the Angular SDK Guide.

Table of Contents

• Key Features
• Version Support
• Installation
• Usage
  • Setup
  • Transform and Optimize Assets
  • Generate Image and HTML Tags

Key Features

• Transform and optimize assets.
• Generate image and video tags.

Version Support

SDK Version	ng 2	ng 4	ng >=5.0.0
5.x	X	X	V
4.x	X	V	X
2.x	V	X	X

Installation

npm install @cloudinary/angular-5.x cloudinary-core --save

Usage

Setup

import { NgModule } from '@angular/core';
// ...
import { CloudinaryModule, CloudinaryConfiguration } from '@cloudinary/angular-5.x';
import { Cloudinary } from 'cloudinary-core';

@NgModule({
    imports: [
        CloudinaryModule.forRoot({Cloudinary}, { cloud_name: 'your_cloud_name' } as CloudinaryConfiguration),
    ],
    bootstrap: [/* ... */]
})
export class AppModule { }

Transform and Optimize Assets

• See full documentation

    <cl-image public-id="readme" class="thumbnail inline" angle="20" format="jpg">
        <cl-transformation height="150" width="150" crop="fill" effect="sepia" radius="20"></cl-transformation>
        <cl-transformation overlay="text:arial_60:readme" gravity="north" y="20"></cl-transformation>
    </cl-image>

Generate Image and Video HTML Tags

- Use <cl-image> to generate image tags
- Use <cl-video> to generate video tags

File upload

This SDK does not provide file upload functionality, however there are several methods of uploading from the client side.

Contributions

• Ensure tests run locally (npm run test)
• Open a PR and ensure Travis tests pass

Get Help

If you run into an issue or have a question, you can either:

• Issues related to the SDK: Open a Github issue
• Issues related to your account: Open a support ticket

About Cloudinary

Cloudinary is a powerful media API for websites and mobile apps alike, Cloudinary enables developers to efficiently manage, transform, optimize, and deliver images and videos through multiple CDNs. Ultimately, viewers enjoy responsive and personalized visual-media experiences—irrespective of the viewing device.

Additional Resources

• Cloudinary Transformation and REST API References: Comprehensive references, including syntax and examples for all SDKs.
• MediaJams.dev: Bite-size use-case tutorials written by and for Cloudinary Developers
• DevJams: Cloudinary developer podcasts on YouTube.
• Cloudinary Academy: Free self-paced courses, instructor-led virtual courses, and on-site courses.
• Code Explorers and Feature Demos: A one-stop shop for all code explorers, Postman collections, and feature demos found in the docs.
• Cloudinary Roadmap: Your chance to follow, vote, or suggest what Cloudinary should develop next.
• Cloudinary Facebook Community: Learn from and offer help to other Cloudinary developers.
• Cloudinary Account Registration: Free Cloudinary account registration.
• Cloudinary Website: Learn about Cloudinary's products, partners, customers, pricing, and more.

Licence

Released under the MIT license.

cloudinary_angular's Issues

Unable to pull back image from Cloudinary with cl-image tag

Hi,
I am currently attempting to integrate the Cloudinary CDN into my Angular application. It is pretty basic at the moment, but you can see the live site at www.wrestlemaniamainevent.com

I have an image in my cloud drive with a public id of "mania12". I know this works as I can pull it back in PHP using the cloudinary_php library by doing this:

<?php cl_image_tag("mania12", array( "alt" => "Sample Image" )) ?>

However, I am trying to do this inside my code but I am not getting an image back from the CDN:

<cl-image public-id="mania12" class="fill" style="display: block;" />

In my document.ready I have this:

$.cloudinary.config('cloud_name', 'wrestlemania-main-event');

Does that look right to you? Can you help?

Many thanks.

Signed image upload?

Hi, i couldn't find any documentation about achieving signed image upload with this.
Is it possible? Any documentation on it?

Image Tag Directive inside of an ng-repeat

Hi,
I'm trying to use the Cloudinary Image tag directive inside of an ng-repeat and not having much success.

<div class="container" ng-repeat='item in items track by $index'>
    <article class="row">
        <header class="col-sm-12">
                <h1 class="title">

                {{item.title}}
            </h1>
            <cl-image public-id="{{ item.image.public_id }}" class="img-responsive" format="jpg">
                <cl-transformation height="470" width="1370" crop="fill"/>
            </cl-image>
        </header>
    </article>
</div>

The initial image shows up for the first item, but not for subsequent items ...

Thoughts?

tags fields not working

Hi!

The tags fields seems to be not working. This is a sample of upload:

                     Upload.upload({
                        url: environment.cloudinary.upload,
                        data: {
                            upload_preset: environment.cloudinary.upload_preset,
                            tags: ['tag1', 'tag2'],
                            context: 'xxx',
                            file: base64
                        },
                        skipAuthorization: true
                    })

The context works fine, but I didn't receive in the response the tags fields created with these parameters.

Am I missing something?

Deleting Uploaded file from client side

There is no documentation about how to delete a recently uploaded file from angular can you guide me about it .

Upload preset must be whitelisted for unsigned uploads - question

the following error hola que tal greetings to the community have the following questions when saving an image appears Cloudinary

`
$scope.uploadPic = function(file) {
Upload.upload({
url: "https://api.cloudinary.com/v1_1/" + cloudinary.config().cloud_name + "/image/upload",
data: {
upload_preset: cloudinary.config().upload_preset,
tags: 'myphotoalbum',
public_id: 'dwdw',
context: 'photo=' + file.name,
file: file
}
}).progress(function(e) {
console.log(e);
}).success(function(data, status, headers, config) {
console.log(data, status, headers, config);
}).error(function(data, status, headers, config) {
console.log(data, status, headers, config);
});

};`

and reestablished the Upload presets for testing and this error keeps coming.
How I can avoid this error?

Can't setup image crop

Hi,

After checking every possible link, repo, version and blog, I'm sure I'm missing something to successfully setup Blueimp cropping in photo_album_with_jquery sample.

Uncommented lines in controllers.js, no change.

        disableImageResize: false,
        imageMaxWidth: 800,
        imageMaxHeight: 600,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
        maxFileSize: 20000000, // 20MB

Added couple of additional scripts to index.html, moved them around, no change.

I see some differences in how file is processed depending on flags in controllers.js, but there's no UI to crop whatsoever.

What am I missing?

can you delete or update?

if not can you point me in the right direction to try to contribute to do it, thanks

question about porting to mean.io as a package.

I am trying to get the sample app working as a package in the mean.io stack and I am getting the following error undefined is not a function from the following line in the controller.

$scope.widget = $(".cloudinary_fileupload")

By default my app is loading jquery but I think I had read that you should not mix jquery syntax in angular. Can you shed any light in this issue I am having.

It is working fine in the sample app but it only when I try to port this into the meanio framework I see this problem. I think I have all the dependancies loaded.

Image Tag Directive inside of an ng-repeat

Hi,
I'm trying to use the Cloudinary Image tag directive inside of an ng-repeat and not having much success.

<div class="container" ng-repeat='item in items track by $index'>
    <article class="row">
        <header class="col-sm-12">
                <h1 class="title">

                {{item.title}}
            </h1>
            <cl-image public-id="{{ item.image.public_id }}" class="img-responsive" format="jpg">
                <cl-transformation height="470" width="1370" crop="fill"/>
            </cl-image>
        </header>
    </article>
</div>

The initial image shows up for the first item, but not for subsequent items ...

Thoughts?

Responsive images within a directive fails to find the parent width

Hey guys,
Recently, I was building a carousel and ran into the following problem
My Code

<div class="panel-body">
  <uib-carousel active="active" interval="5000" >
    <uib-slide ng-repeat="img in app._source.screenshots">
      <cl-image public-id="{{img}}" fetch_format="auto" quality="80" responsive crop="fill" dpr="auto" width="auto">
      </cl-image>
    </uib-slide>
 </uib-carousel>
</div>

Rendered html

<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel ng-isolate-scope" ng-swipe-right="prev()" ng-swipe-left="next()" active="active" interval="5000">
  <div class="carousel-inner" ng-transclude="">
              <!-- ngRepeat: img in app._source.screenshots --><div ng-class="{
    'active': active
  }" class="item text-center ng-isolate-scope" ng-transclude="" ng-repeat="img in app._source.screenshots">
                <img ng-transclude="" class="image-responsive-height ng-scope ng-isolate-scope cld-responsive" public-id="colosse1_k4p593" fetch_format="auto" quality="80" responsive="" crop="fill" dpr="auto" data-src="http://res.cloudinary.com/turingvr/image/upload/c_fill,dpr_1.0,f_auto,q_80,w_auto/colosse1_k4p593"></img>
              </div><!-- end ngRepeat: img in app._source.screenshots --><div ng-class="{
    'active': active
  }" class="item text-center ng-isolate-scope active" ng-transclude="" ng-repeat="img in app._source.screenshots">
                <img ng-transclude="" class="image-responsive-height ng-scope ng-isolate-scope cld-responsive" public-id="colosse2_ptfuzb" fetch_format="auto" quality="80" responsive="" crop="fill" dpr="auto" data-src="http://res.cloudinary.com/turingvr/image/upload/c_fill,dpr_1.0,f_auto,q_80,w_auto/colosse2_ptfuzb"></img>
              </div><!-- end ngRepeat: img in app._source.screenshots --><div ng-class="{
    'active': active
  }" class="item text-center ng-isolate-scope" ng-transclude="" ng-repeat="img in app._source.screenshots">
                <img ng-transclude="" class="image-responsive-height ng-scope ng-isolate-scope cld-responsive" public-id="colosse3_e5ufyn" fetch_format="auto" quality="80" responsive="" crop="fill" dpr="auto" data-src="http://res.cloudinary.com/turingvr/image/upload/c_fill,dpr_1.0,f_auto,q_80,w_auto/colosse3_e5ufyn"></img>
              </div><!-- end ngRepeat: img in app._source.screenshots --><div ng-class="{
    'active': active
  }" class="item text-center ng-isolate-scope" ng-transclude="" ng-repeat="img in app._source.screenshots">
                <img ng-transclude="" class="image-responsive-height ng-scope ng-isolate-scope cld-responsive" public-id="colosse4_apyto4" fetch_format="auto" quality="80" responsive="" crop="fill" dpr="auto" data-src="http://res.cloudinary.com/turingvr/image/upload/c_fill,dpr_1.0,f_auto,q_80,w_auto/colosse4_apyto4"></img>
              </div><!-- end ngRepeat: img in app._source.screenshots -->
            </div>
  <a role="button" href="" class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1">
    <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">previous</span>
  </a>
  <a role="button" href="" class="right carousel-control" ng-click="next()" ng-show="slides.length > 1">
    <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">next</span>
  </a>
  <ol class="carousel-indicators" ng-show="slides.length > 1">
    <!-- ngRepeat: slide in slides | orderBy:indexOfSlide track by $index --><li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)" class="ng-scope">
      <span class="sr-only ng-binding">slide 1 of 4<!-- ngIf: isActive(slide) --></span>
    </li><!-- end ngRepeat: slide in slides | orderBy:indexOfSlide track by $index --><li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)" class="ng-scope active">
      <span class="sr-only ng-binding">slide 2 of 4<!-- ngIf: isActive(slide) --><span ng-if="isActive(slide)" class="ng-scope">, currently active</span><!-- end ngIf: isActive(slide) --></span>
    </li><!-- end ngRepeat: slide in slides | orderBy:indexOfSlide track by $index --><li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)" class="ng-scope">
      <span class="sr-only ng-binding">slide 3 of 4<!-- ngIf: isActive(slide) --></span>
    </li><!-- end ngRepeat: slide in slides | orderBy:indexOfSlide track by $index --><li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)" class="ng-scope">
      <span class="sr-only ng-binding">slide 4 of 4<!-- ngIf: isActive(slide) --></span>
    </li><!-- end ngRepeat: slide in slides | orderBy:indexOfSlide track by $index -->
  </ol>
</div>

Console error (for each img in ng-repeat)

angular.min.js:102ReferenceError: support is not defined
    at getWidthOrHeight (cloudinary-core-shrinkwrap.js:3710)
    at Object.width (cloudinary-core-shrinkwrap.js:3716)
    at parentWidth (cloudinary-core-shrinkwrap.js:6298)
    at Cloudinary.cloudinary_update (cloudinary-core-shrinkwrap.js:6349)
    at loadImage (angular.cloudinary.js:147)
    at angular.cloudinary.js:119
    at angular.min.js:72
    at r (angular.min.js:7)
    at Object.Yb.$set (angular.min.js:72)
    at angular.min.js:69(anonymous function)

My initial thoughts were, because the parent element was a directive cloudinary was unable to find the parent element width.
I forced the order of resolution by changing the priority of the <cl-image/> to -99 but of no help.
Thanks in advance.

Using require() with Angular CLI

require() is internal to NodeJS and not available to users of Angular CLI if I am not mistaken. I cannot use this code as it fails.

provideCloudinary(require('cloudinary-core'), { cloud_name: 'your_cloud_name' } as CloudinaryConfiguration)

dynamic updating of picture source

if the public-id attribute is a angular variable that gets changed, the current image is not updated... (should behave like ng-src)

Question: How to use eager transformation with this library?

please make the version 0.1.3 available.

'bower install cloudinary_ng' installs the 0.1.2 version.
please make the version 0.1.3 available.

Upload singed photos with eager transformation

I need to upload an image with an eager transformation. So by Cloudinary restriction I need to create a singed upload.

The following code is what I did, but it is not working... Anyone can help me?

cloudinary.uploadImage = function (file) {
    var deferred = $q.defer();
    var timestamp = (new Date).getTime() / 1000; // in seconds
    var signature = serverAPI.getHashSignature();

    $upload.upload({
        url: "https://api.cloudinary.com/v1_1/" + $.cloudinary.config().cloud_name + "/upload",
        data: {
            api_key: apiKey,
            timestamp: timestamp,
            signature: signature,
            tags: 'temp_cover'
        },
        file: file,
        eager: {
            width: 1920,
            height: 1080,
            crop: 'limit'
        }
    }).progress(function (e) {

    }).success(function (data, status, headers, config) {
        console.log(config)
        deferred.resolve(data);
    }).error(function (error) {
        deferred.reject(error);
    });
    return deferred.promise;
}

The image is uploaded properly but the transformation doesn't work..

How to replace with an upload image?

Hi,

I replace the code in the directive to have an upload image (in angular.cloudinary.js) like this (it works perfectly):
template : '

Ajouter une image

',

The problem is that my lib directory in not versionned so I don't know how to have it saved. (I don't want to version external lib, as I use bower to retrieve them)

Maybe there is another way to do it?

Or should I fork the project (which I would like to avoid) ?

could drag multiple images but are not being uploaded

Looks like we could drag or select multiple images but it is only uploading the latest image. can you please add support to upload multiple images? I was able to add this feature on jquery with multiple="multiple" but the same is not working for angular version.

            <div class="form_line">
                <label>Image:</label>
                <div class="form_controls">
                    <div class="upload_button_holder">
                        <div href="#" class="upload_button" ng-file-select="onFileSelect($files)" data-multiple="true" multiple="multiple" title="aaaa" onclick="this.value = null">Upload</div> 
                    </div>
                    <div class="status">{{status}}</div>
                    <div class="progress-bar">
                        <div class="progress" style="width: {{progress}}%" ng-init="progress=0"></div>
                    </div>
                </div>
            </div>

How to do responsive images

For the jquery version the doc is here
http://cloudinary.com/blog/how_to_automatically_create_images_for_responsive_design#api_example_2

How to do it with angular?

Setting width to auto and calling cloudinary.responsive() in controller does not work!
In the above link the "responsive image" is in "data-src" as opposed to "src" but cl-image puts
image in "src" which gives the following error

https://res.cloudinary.com/<<my cloud name here>>/image/upload/c_scale,h_304,w_auto/<<my image id here>>
400 (Bad Request)'

XMLHttpRequest cannot load ...

Hi,
I´ve spent two days trying to use cloudinay angular in my angular project but I have always the same problem and I don't know how to solve it.

Has someone experience with this error?

XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/djhqderwy/upload. Request header field Authorization is not allowed by Access-Control-Allow-Headers.

Thanks in advance

jQuery.cloudinary doesnt seem to be defined.

Hi Team,

I am trying to integrate my angular application code with Cloudinary and I am also using jQuery in the application.

There seems to be an issue with the following logic.

// line #159 in angular.cloudinary.js
if(cloudinary.CloudinaryJQuery && jQuery) {
    // cloudinary is attached to the global jQuery object
    jQuery.cloudinary.config(configuration.config());
    return jQuery.cloudinary;
}

I see both cloudinary.CloudinaryJQuery and jQuery defined, but jQuery.cloudinary doesn't seem to be defined, because of which I see an error. Any reason what might causing this issue?

can you upload cloudinary angular itself

cloudinary angular have dependency cloudinary js and cloudinary. and also it has https://github.com/blueimp/jQuery-File-Upload dependency. My automation task by grunt generates huge dependency lists from your dependency setting can you upload individually?

image id is not getting replaced in the public-id

The image id is not getting replaced in the public-id. Can someone hlep me with this. Am i using it right?

1. Cloudinary HTML code :

<cl-image public-id="{profileImageId}" format="jpg" > 
                                <cl-transformation  height="150" width="150" crop="thumb" gravity="face" border="2px_solid_rgb:00390b60" /> 
                            </cl-image>

1. angular - controller:

$scope.profileImageId=userSession.getData().profileImageId;

1. Cloudinary request generated :

http://res.cloudinary.com/realint/image/upload/bo_2px_solid_rgb:00390b60,c_thumb,g_face,h_150,w_150/%7BprofileImageId%7D.jpg

import { CloudinaryModule, CloudinaryConfiguration, provideCloudinary } from 'cloudinary-ng';

'cloudinary-ng' does not exist. Probably best to update README.MD

How to generate og:image tags?

Hello!

Is there any support for generating dynamic meta tag og:image url for facebook?

meta(property="og:image" content="image url how in angular??")

How should I get this?

Thanks,
Andrej

feature-request: angular2 support?

Round height and width values before sending to cloudinary

Cloudinary does not accept decimal height and width values, so the cl-transformation directive should round any input before sending them off

Sample not working in ie9

I'm trying to get angular and cloudinary uploads to work in ie9 but haven't been able to yet. After opening a ticket with cloudinary they sent me to this repo. I have the sample project working in all browsers and ie10 but in ie9 when I click on the link to upload angular files the page is mostly blank.

Is this a known issue? Any way to get it working properly? Thanks!

Unable to upload image at a specific transformation and width

I'm trying to specify a width here but it's still saving the original image. How can I specify a crop with limit and width 600?

Upload.upload({ url: "https://api.cloudinary.com/v1_1/myfolder/upload", data: { crop: 'limit', width: 600, folder: window.location.host, upload_preset: 'abcd', file: file } })

Feature request: Video support

It's great you guys created this module, but what about video support?

Any support video uploads?

Hi;

I heard that cloudinary now supports video uploads. Is there any plan to support it?

how to return URL only with no markup

Hi,

Can you advise if it is possible to use the cloudinary_angular to pull back an URL only for use with inline markup such as this:

<div class="fill" style="background-image: url('http://res.cloudinary.com/wrestlemania-main-event/image/upload/c_fill,h_559,q_60,w_800/mania12.jpg');">

I can see that I can use the <cl-image> tag, but this returns an <img> tag which i'm not looking for.

Does the code support returning a URL at the moment?

Many thanks,
Craig.

Can we use it for Facebook meta image tag ?

Hello there,

First of all, thanks a lot for this awesome repo :)
I am wondering if we can use cloudinary_angular to generate Facebook Image Meta header (meta tag rather than img one)?

Here's an example from the Facebook dev documentation :

<meta property="og:image"
content="http://graphics.myfavnews.com/images/logo-100x100.jpg" />

Do you think we can generate such output with this package?

Thanks,
Benjamin

I'm getting Cross-Origin Request Blocked error since 2 weeks

Hi;

I was successfully using the library. But since 2 weeks, I started to get CORS error. What is the proper way to fix that?

UPDATE: In Chrome, I am getting following:

Request header field Authorization is not allowed by Access-Control-Allow-Headers

Fetch not working in this example

Installing this Angular project, everything works fine but the fetch examples do not. has something changed in the underlying API?

cluoudinary in ionic framework

as would be the process for using ionic framework and upload the image, Greetings

Support for named transformations

I get: General Error, when update to last version on ng-file-upload 11.1.1

Hi,

With the last version of https://github.com/danialfarid/ng-file-upload, (11.1.1) , i get

{"error":{"message":"General Error"}}
POST https://api.cloudinary.com/v1_1/<**********>/upload 500 (Internal Server Error)

        Upload.upload({
          url: 'https://api.cloudinary.com/v1_1/<**********>/upload',
          data: {
            file: file,
            public_id: fileId,
            upload_preset: '<**********>',
            context: 'alt=' + file.name + '|caption=' + file.name +  '|photo=' + file.name + '|$id=' + fileId,
            tags: [publicationId]
          }
        }).then(function (resp) {
          console.log('resp',resp);
        }, function (resp) {
          console.log('Error status: ' + resp.status);
        }, function (evt) {
          file.progress = Math.round((evt.loaded * 100.0) / evt.total);
        });

best regards.

Angular 2 support

Just a question on whether Angular 2 support is on your road map?

Remove dependency on jQuery

I'd love to drop this into our project, but the dependency on jQuery is a deal-killer since we're keeping things as light as possible.

We (and I assume many others) would find it pretty valuable to have cloudinary as a standalone bower install to get up to speed more quickly.

How to collect multiple upload successes using a forEach loop?

I'm uploading multiple images at a time, and want to collect the results in an array that I can then submit to my DB. I'm not super experienced with promises, so I'm not sure how to wait until all of the data is collected before sending the array on to my DB.

Any ideas?

app.controller 'ProductImageUploaderController', ($upload, $routeParams, Product) ->

  $routeParams.photos = []

  @startUpload = ->
    @files.forEach (file) ->
      upload = $upload.upload(
        url: 'https://api.cloudinary.com/v1_1/' + $.cloudinary.config().cloud_name + '/upload'
        fields:
          upload_preset: $.cloudinary.config().upload_preset
          tags: 'dev'
          folder: 'dev'
        file: file
      )
      upload.success (data) ->
        $routeParams.photos.push(file)

    # Send $routeParams.photos to my DB...

  return

File upload sample example fails with error: "Upload preset Must specify upload preset when using unsigned"

I am getting error: "Upload preset Must specify upload preset when using unsigned". My config settings are fine. Issue seems to be because upload_preset is not sent as a form-data param but as a part of json

NamedNodeMap check causes Firefox Gecko <34 to crash

Need to add typeof check before attempting to evaluate NamedNodeMap

var isNamedNodeMap = source && (source.constructor.name === "NamedNodeMap" || source instanceof NamedNodeMap)

to

var isNamedNodeMap = source && (source.constructor.name === "NamedNodeMap" || (typeof NamedNodeMap != 'undefined' && source instanceof NamedNodeMap));

Uploading doesn't work with angular-file-upload 3.0.4

$upload.upload Receives an error from the server saying upload_preset wasn't passed in request.

sample doc update.

I did not realize that the sample app should be displaying the contents of the album. When I created my album I added a tag bowerman and had to change services.js line 7 from
var url = $.cloudinary.url('myphotoalbum', {format: 'json', type: 'list'});
to
var url = $.cloudinary.url('bowerman', {format: 'json', type: 'list'});

I also changed the controller at line 17 from myphotoalbum to
.unsigned_cloudinary_upload($.cloudinary.config().upload_preset, {tags: 'xxx', context:'photo='}, { but I do not see any affect. The image I uploaded from the sample app still has the same bowerman tag.

Publish to npm

i'd like to install this via npm (similar to the new pkg-cloudinary-core)

Bower Install Issue

Hi,
when I try to install the bower components for the photoalbum I get the following error:

bower ng-file-upload#7.0.x cached git://github.com/danialfarid/angular-file-upload-bower.git#7.0.17
bower ng-file-upload#7.0.x validate 7.0.17 against git://github.com/danialfarid/angular-file-upload-bower.git#7.0.x
bower angular-route#1.4.x cached git://github.com/angular/bower-angular-route.git#1.4.6
bower angular-route#1.4.x validate 1.4.6 against git://github.com/angular/bower-angular-route.git#1.4.x
bower angular#1.4.x cached git://github.com/angular/bower-angular.git#1.4.6
bower angular#1.4.x validate 1.4.6 against git://github.com/angular/bower-angular.git#1.4.x
bower angular-animate#1.4.x cached git://github.com/angular/bower-angular-animate.git#1.4.6
bower angular-animate#1.4.x validate 1.4.6 against git://github.com/angular/bower-angular-animate.git#1.4.x
bower angular-resource#1.4.x cached git://github.com/angular/bower-angular-resource.git#1.4.6
bower angular-resource#1.4.x validate 1.4.6 against git://github.com/angular/bower-angular-resource.git#1.4.x
bower cloudinary_ng#master ENORESTARGET File system sources can't resolve targets

Could you please tell me what's wrong?
Thanks
Tom

how to use secure url by using cl-image directive?

I need to have a https url. I have look through the code and it seems there is no option for secure version of image url/

CORS Issue Using angular-file-upload

Hi,

I'm currently getting the following error when I try to upload using the angular-file-upload on Chrome :

XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/xxxxx/users. The request was redirected to 'http://api.cloudinary.com/api/v1_1/xxxxx/users', which is disallowed for cross-origin requests that require preflight.

Here is the Request / response headers of my request :

Status Code:302 Found

Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,fr;q=0.6,ja;q=0.4
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:api.cloudinary.com
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36

Response Headers
Cache-Control:no-cache
Connection:keep-alive
Content-Type:text/html; charset=utf-8
Date:Thu, 05 Mar 2015 15:55:33 GMT
Location:http://api.cloudinary.com/api/v1_1/xxxxx/users
Server:cloudinary
Status:302 Found
transfer-encoding:chunked
X-Request-Id:71dac992695a5274
X-UA-Compatible:IE=Edge,chrome=1

And here is my $upload call :

        avatarCtrl.uploadPromise = $upload.upload({
            url: 'https://api.cloudinary.com/v1_1/xxxxxx/users',
            method: 'POST',
            fields: {
                upload_preset: 'yyyyyy'
            },
            file: avatarCtrl.file[0]
        }).success(function(data, status, headers, config) {
            // ...
        });

I'm not sure where I should start looking. If you need more code snippets, feel free to ask.

Thanks,

Support for default image tag?

The rails view helper has support for the default_image tag as described here:

http://cloudinary.com/blog/placeholder_images_and_gravatar_integration_with_cloudinary

It doesn't seem like this library supports that... or am I doing something wrong? If not, are there plans to support it?

Thanks!