Initialize cloudinary_js v2 in Ember JS app - ember.js

Question

I'm trying to upload images to cloudinary from an EmberJS app (v2.6), following the post of Beerlington where it uses cloudinary_js (now with new API v2) and in order to install it :
npm install blueimp-file-upload --save
npm install cloudinary-jquery-file-upload --save
But when I'm trying to initialize the cloudinary the library is not recognized.
#app/initializers/cloudinary.js
export default {
name: 'cloudinary',
initialize: function(/* container, app */) {
jQuery.cloudinary.config({
cloud_name: ENV.CLOUDINARY_NAME
});
}
};
#console
TypeError: Cannot read property 'config' of undefined

Answer 1

Since ember.js is essentially a client side framework, you need to use bower libraries instead of npm (more).
Install Cloudinary using bower:
bower install cloudinary-jquery-file-upload --save
(blueimp will be installed as a dependency.)
Add the imports to your ember-cli-build.js file:
/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
});
app.import("bower_components/jquery/dist/jquery.js");
app.import("bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js");
app.import("bower_components/blueimp-file-upload/js/jquery.iframe-transport.js");
app.import("bower_components/blueimp-file-upload/js/jquery.fileupload.js");
app.import('bower_components/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js');
return app.toTree();
};
Add jQuery to the global definitions in .jshintrc (showing fragment here):
{
"predef": [
"document",
"window",
"-Promise",
"jQuery",
"$"
],
"browser": true,
// rest of file...
}
Add cloudinary too if you intend to use the cloudinary namespace directly.
Now you can use Cloudinary and Blueimp in your code. For example:
import Ember from 'ember';
export default Ember.Route.extend(
{
model() {
$.cloudinary.config({"cloud_name": "your_cloud"});
$(document).ready(function () {
$(".cloudinary-fileupload").cloudinary_fileupload(
// etc.
)}
);
}
});