Integrate cloudinary_js with ember

Ember Data
1

Hi

I am working on my first ember application using Ember-cli

Here i want to add feature of image-upload using cloudinary_js

Referring this [link][1]

Image Model:

import DS from 'ember-data';
var attr = DS.attr;

export default DS.Model.extend({
  imageUrl:         attr('string'),
  thumbImageUrl:    attr('string'),
  standardImageUrl: attr('string'),
  favourite:        attr('string'),
  order:            attr('number')
});

I have already added the required js files using bower and listed them in Brocfile.js

app.import('vendor/jquery-ui/jquery-ui.js');
app.import('vendor/jquery.iframe-transport/jquery.iframe-transport.js');
app.import('vendor/blueimp-file-upload/js/jquery.fileupload.js');
app.import('vendor/cloudinary_js/js/jquery.cloudinary.js');

Added file field as component:

import Ember from "ember";

export default Ember.View.extend({
  tagName: "input",
  type: "file",
  accept: "image/*",
  class: "cloudinary-fileupload",
  dataCloudinaryField: "image_id",
  attributeBindings: [ "name", "type", "value", "class"],
  change: function() {
  }
});

Here am stuck with, where to specify the config of cloudinary (cloud name and api key)?

Can anyone please help me with the detailed steps of cloudinary integration with ember using ember-cli.

Thanks. [1]: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

2

Might want to checkout https://github.com/thoughtindustries/ti-cloudinary

3

@swatijadhav I hope you already figured this out, but in case you haven’t, I wrote a blog post about integrating cloudinary_js with Ember. I included an example ember-cli app that is linked from the blog and demonstrates things like where to specify the configuration, what dependencies to require, how to generate the authentication signature (in Rails), and how to build a cloudinary image tag using the image’s public ID.

I was really surprised at the lack of resources and poor documentation I found when I was doing research on it, so hopefully this saves someone time in the future!

2 Likes
4

@tonycoco Thanks for reply. I had checked that link before too, but not much helpful for me.

5

@beerlington Thanks a lot. Actually, I was able to implement image upload feature with the same way as you have done.

But the blog you wrote is really helpful and nicely explained with proper steps. There is no proper documentation provided for it anywhere, so this blog is going to be most helpful to others.

Thanks :smile: :+1:

1 Like
6

I wrote a follow up post to this that discusses unsigned uploads. I haven’t used this feature in a production application yet, but it seems like an interesting way to get around the need to make an server-side request for an authentication signature.

1 Like