0_template.html.haml

%div{ng: {controller: 'planner.coverImageController', init: @plan.to_json}}
  %img{ng: {src: 'getCoverImageUrl()'}}

  // The cloudinary directive communicates with the cover image controller through `done`.
  // When the fileuploaddone
  %div{cloudinary: 'true', done: 'fileDidUpload(url)', timestamp: cloudinary_info.timestamp, corscallback: cloudinary_info.cors_callback, signature: cloudinary_info.signature, apikey: cloudinary_info.api_key}

1_controller.js.coffee

app.controller 'planner.coverImageController', ['$scope', 'plan.common.planResource', ($scope, planResource) ->
  $scope.plan = undefined

  $scope.init = (props) ->
    $scope.plan = new planResource(props)

  $scope.getCoverImageUrl = ->
    plan.image_url or 'http://...default.png'

  $scope.fileDidUpload = (url) ->
    plan.image_url = url
    plan.save()

2_directive.js.coffee

app.directive 'cloudinary', ->
  scope:
    done: '&'         # We take an expression in the done attribute which is excuted in the context of the parent (That is, a callback).
    timestamp: '@'    # Make this attribute available in the template (Through the scope)
    corscallback: '@' # " "
    apikey: '@'       # " "

  replace: true       # Replace this element with the template below. `el` in the link function becomes the root element in the template.

  template: """
    <input name="file" type="file" multiple="multiple"
      class="cloudinary-fileupload"
      data-form-data="{{ formData | json }}"></input>
    """

  controller: ->
    this.formData = ->
      timestamp: this.timestamp
      api_key: this.apikey
      signature: this.signature
      callback: this.corscallback

    this

  link: (scope, el, attrs, ctrl) ->
    el.on 'fileuploaddone', (event, data) ->
      scope.done data.response().result.secure_url

3_helper.rb

module CloudinaryHelper
  def cloudinary_info
    unless defined?(@cloudinary_info)
      current = Time.current.to_i
      info    = OpenStruct.new(
        timestamp: current,
        cors_callback: '/cloudinary_cors.html',
        signature: Digest::SHA1.hexdigest("callback=/cloudinary_cors.html&timestamp=#{current}#{Env.fetch('CLOUDINARY_API_SECRET')}"),
        api_key: ENV.fetch('CLOUDINARY_API_KEY')
      )
      @cloudinary_info = info
    end

    @cloudinary_info
  end
end