0

I am trying to use cloudinary with angular as per given example

When page is loaded then I can see both console.log() printed, but when I am uploading a file then nothing happens. I am not getting any console error and no console.log() is printed which I have added in $watch. Am I doing anything wrong here?

Also we can see from the example from the link, this upload button gets an on-click event added, that isn't case with me, is that the issue?

My App is

var myApp = angular.module('myApp', [
  'ngRoute', 'ngResource', 'ngInflection', 'templates', 
  'cloudinary','angularFileUpload'])

My Controller is

myApp.controller('LocationUpdate', ['$scope', '$rootScope', 
  '$resource', '$http', '$location', '$routeParams', '$upload',
  function($scope, $rootScope, $resource, $http, $location, 
  $routeParams, $upload){
    console.log("in controller");
    // here i have added a listener which is not getting invoked
    $scope.$watch('files', function() {
      console.log('in watcher');
    }
  }]);

My template code in haml is 

#direct_upload{"ng-file-drag-over-class" => "", "ng-file-drop" => "", "ng-model" => "files", "ng-multiple" => "true"}
  .upload_button_holder
    .upload_button{:href => "#", "ng-file-select" => "", "ng-model" => "files", "ng-multiple" => "true", :resetonclick => "true", :title => "upload"} Upload

My application.js is 


//= require jquery
//= require jquery_ujs
//
//= require cloudinary
//= require jquery.cloudinary
//= require angular-file-upload-shim.min
//= require angular
//= require angular-animate
//= require angular-route
//= require angular-resource
//= require angular.cloudinary
//= require angular-file-upload.min
//= require ./angular-ui-router.min
//= require angular-sanitize
//= require angular-ui-bootstrap
//= require angular-ui-bootstrap-tpls
//= require angular-rails-templates
//= require angular/my_app
//= require_tree .


$.cloudinary.config().cloud_name = 'XXXXXXX';
$.cloudinary.config().upload_preset = 'XXXXXX';
RAJ
  • 9,697
  • 1
  • 33
  • 63
Swapnil Chincholkar
  • 2,869
  • 3
  • 22
  • 22
  • You need to actually use your cloud_name not "XXXXXX" – Nathan Apr 11 '15 at 12:52
  • @Nathan its for example, i am using actual cloud name in code – Swapnil Chincholkar Apr 11 '15 at 13:01
  • I don't see any method call on your upload button. You need something like `ng-change="uploadImage()"` -- this should be a method in your controller. – Nathan Apr 11 '15 at 13:16
  • @Nathan its not even in the example. What I understood from example from link is $watch looks for files to be uploaded & send them. When added console.log() in example's -> controller -> watch function I can see logs getting printed. Please look at angular upload. Not able to figure out whats wring in my code – Swapnil Chincholkar Apr 11 '15 at 14:09

0 Answers0