Initialize cloudinary_js v2 in Ember JS app

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

ember-cli-build.js - app.import(.js>.... include all the required files. — Ember Freak, Aug 01 '16 at 05:36
as I installed the libraries with npm they are in npm_modules/ and when I tried to import it in ember-cli-build.js, it complains. it works for vendor/ and bower_components/ — figuedmundo, Aug 02 '16 at 02:58
I also tried with ember-browserify but it didn't work with cloudinary-jquery-file-upload neither :( — figuedmundo, Aug 02 '16 at 03:04
This will help you - http://stackoverflow.com/questions/26544578/how-to-use-third-party-npm-packages-with-ember-cli-app - Is there any specific reason for you to go only with npm packages. — Ember Freak, Aug 02 '16 at 07:20
becouse in the 'cloudinary-jquery-file-upload.js' file that I get installing with npm I found the method 'unsigned_cloudinary_upload' but in the js file get by bower I couldn't find that method. I already tried with ember-browserify unsuccessfully. — figuedmundo, Aug 03 '16 at 04:21

score 1 · Accepted Answer · answered Aug 08 '16 at 05:17

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.

        )}
      );
    }
  });

Initialize cloudinary_js v2 in Ember JS app

1 Answers1