Deprecated: Cloudinary now offers an official Angular library -
Home Page: https://github.com/cloudinary/cloudinary_angular
License: MIT License
I use Hexo for this repository
Hi,
What is the license of this code? We need to modify it in a non generic way for our UI purposes.
Thanks for contributing this!
Lori
We have found an odd situation where when we use a cl-image directive with an ng-show / ng-hide directive (set to the cloudinaryPublicId) in the same the ng-hide does not seem to function correctly.
The work around is to wrap the cl-image tag with a div (or span) and use the ng-hide on the div (or span)
I am using the Angular Service example in the README to return cloudinaryData in the format
{
url:[my_url],
formData:{
timestamp:1399341631,
signature :[generated_signature],
api_key:[my_api_key]
}
}
My html tag is
<div id="photo-upload-btn" class="photo-upload-btn" cl-upload data="cloudinaryData"></div>When I choose an image and press upload, the "POST" method fails and I get an error
{"error":{"message":"Upload preset Must specify upload preset when using unsigned upload"}}Can anyone point me in the right direction?
Hi @jbcpollak,
We appreciate the attention!
However since this repository is deprecated, could you please unregister it from bower?
Some of our users found having two libraries confusing.
Thanks!
@tocker from @cloudinary
Any help would be very much appreciated. I've re-read the doc many times and I still don't understand how to use this code with cloudinary + angular. (for yo angular or MEAN stack)
I ran npm install cloudinary and I'm not sure what's next.
Thanks
I am using mean stack application.
(function(requirejs) {
'use strict';
// -- DEV RequireJS config --
requirejs.config({
// Packages = top-level folders; loads a contained file named 'main.js'
noGlobal: true,
packages: ['main'],
shim: {
'jquery': {
exports: '$'
},
'lodash': {
exports: '_'
},
'angular': {
exports: 'angular',
deps: ['jquery']
},
'angular-cookies': {
deps: ['angular']
},
'angular-sanitize': {
deps: ['angular']
},
'angular-animate': {
deps: ['angular']
},
'angular-resource': {
deps: ['angular']
},
'text': ['require'],
'app': ['angular'],
'ui-router': ['angular'],
'angular-xeditable': ['angular'],
'restangular': ['lodash', 'angular'],
'angular-bootstrap': ['angular'],
'semantic': ['jquery'],
'pickadate': ['jquery'],
'datetimepicker': ['jquery'],
'pickadatedate': ['pickadate'],
'angular-breadcrumb': ['angular'],
'angular-file-upload-shim' : {
deps: ['angular']
},
'cloudinary' :{
deps: ['angular','angular-animate','ui-router','angular-resource']
} ,
'angular-file-upload' :{
deps : ['angular']
}
},
paths: {
'text': '../lib/requirejs-text/text',
'angular': '../lib/angular/angular',
'jquery': '../lib/jquery/jquery',
'lodash': '../lib/lodash/dist/lodash.min',
'semantic': '../lib/semantic/build/packaged/javascript/semantic',
'angular-sanitize': '../lib/angular-sanitize/angular-sanitize',
'angular-animate': '../lib/angular-animate/angular-animate',
'angular-cookies': '../lib/angular-cookies/angular-cookies',
'ui-router': '../lib/angular-ui-router/release/angular-ui-router',
'angular-resource': '../lib/angular-resource/angular-resource',
'angular-bootstrap': '../lib/angular-bootstrap/ui-bootstrap',
'restangular': '../lib/restangular/dist/restangular.min',
'pickadate': '../lib/pickadate/lib/picker',
'datetimepicker': '../lib/smalot-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min',
'textangular': '../lib/textAngular',
'pickadatedate': '../lib/pickadate/lib/picker.date',
'angular-xeditable': '../lib/angular-xeditable/dist/js/xeditable.min',
'moment': '../lib/momentjs/moment',
'd3' : '../lib/d3/d3',
'angular-flash' : '../lib/angular-flash/angular-flash',
'angular-breadcrumb': '../lib/angular-breadcrumb/dist/angular-breadcrumb.min',
'cloudinary' : '../lib/cloudinary_ng/js/angular.cloudinary',
'angular-file-upload' : '../lib/ng-file-upload/angular-file-upload',
'angular-file-upload-shim' : '../lib/ng-file-upload-shim/angular-file-upload-shim.min'
//'jquery.cloudinary' : '../lib/cloudinary_js/js/jquery.cloudinary',
//'jquery.iframe-transport': '../lib//blueimp-file-upload/js/jquery.iframe-transport',
//'jquery.fileupload' : '../lib/blueimp-file-upload/js/jquery.fileupload',
//'jquery.ui.widget' : '../lib/blueimp-file-upload/js/vendor/jquery.ui.widget'
// 'text' : '/lib/'
// You can also define a module here, e.g. a local module that doesn't support RequireJS
// or map a longer path to a shorter name
}
});
// Load the app...
require(['angular', 'text', 'semantic', 'angular-cookies', 'ui-router',
'angular-resource', 'angular-sanitize', 'angular-animate','angular-bootstrap', 'common/main',
'restangular', 'angular-breadcrumb','angular-file-upload-shim','cloudinary','angular-file-upload'
],
function(cookies) {
var startModuleName = $('script[data-main][data-start]').attr('data-start');
if (startModuleName) {
var origModuleName = startModuleName;
startModuleName = startModuleName.replace('.', '/');
require([startModuleName + '/main'], function() {
$(function() {
console.log('Bootstraping auth: ' + origModuleName);
angular.bootstrap(document, ['common', origModuleName]);
});
});
}
}
);
})(requirejs);
define(["./controllers", "./directives", "./services", './filters','./templates', './states'], function(controllers, directives, services, filters, templates, states) {
var mod = angular.module("common",['ui.router','ngResource', 'ngSanitize',
'restangular', 'ui.bootstrap', 'ngAnimate', 'common.directives.mainMenu','common.directives.matchValues',
'common.directives.pickadate','ncy-angular-breadcrumb','common.directives.datetimepicker','common.states','cloudinary','angularFileUpload']);
mod.directive("commonWatchAutofill", directives.watchAutoFill);
mod.controller("common.controller.user.profile",controllers.userprofile);
mod.run(function($rootScope) { // instance-injector
if(window.user)
{
$rootScope.isLoggedIn = true;
$rootScope.user = window.user;
window.user = null;
}
});
mod.config(function($breadcrumbProvider) {
console.log("In breadcrumb");
$breadcrumbProvider.setOptions({
template: templates.breadcrumb
});
});
return mod;
});
GET http://localhost:3000/js/angularFileUpload.js require.js:1903
Uncaught Error: Script error for: angularFileUpload
http://requirejs.org/docs/errors.html#scripterror
I try to put it in the formData as follow:
formData : {
timestamp : data.timestamp,
api_key : data.api_key,
signature : data.signature,
width: 100, height: 100, crop: 'limit'
}
But it doesn't work.
How can I pass the transformation params to limit the file upload size?
thank you.
https://github.com/jbcpollak/cloudinary_angular/blob/master/js/angular.cloudinary.js#L20
line 20 in the documentation is using curlies when it shouldn't:
* <img cl-image class="..." id="..." height="..." data-crop="fit" public-id="{{cloudinaryPublicId}}"/>
it should instead be an expression (without curlies):
* <img cl-image class="..." id="..." height="..." data-crop="fit" public-id="cloudinaryPublicId"/>
It works when you take them out. Not a big deal at all, but just helps to remove confusion from someone trying the library for the first time.
Thanks for the directives by the way! great job
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.