jbcpollak / cloudinary_angular

Deprecated: Cloudinary now offers an official Angular library -
https://github.com/cloudinary/cloudinary_angular
MIT License
32 stars 12 forks source link

Upload preset error #11

Open node-monk opened 10 years ago

node-monk commented 10 years ago

I am using the Angular Service example in the README to return cloudinaryData in the format


   {
         url:[my_url],
         formData:{
              timestamp:1399341631,            
signature :[generated_signature],
              api_key:[my_api_key]
         }
   }

My html tag is


<div id="photo-upload-btn" class="photo-upload-btn" cl-upload data="cloudinaryData"></div>

When I choose an image and press upload, the "POST" method fails and I get an error


         {"error":{"message":"Upload preset Must specify upload preset when using unsigned upload"}}

Can anyone point me in the right direction?

humble-coder commented 10 years ago

Hi ajaxmonk,

I'm not sure what you're using on the server side (I'm using Node), but I just got this working by using the same html tag you have:

<div id="photo-upload-btn" class="photo-upload-btn" cl-upload data="cloudinaryData"></div>

And then writing this angular-cloudinary setup:

setup.js

angular.module('myCloudinary', [])
    .factory('cloudinary', function($http) {
        return {
            'getUploadAttrs' : function(tags, cb) {
                $http.get('/wherever_you're_getting_your_data_from', {
                    params : {
                        'tstamp' : new Date().getTime(),
                        'tags' : tags
                    }})
                .success(function(data) {
                                    //I removed the conditional statement (data.code == 200) 
                                   //because the success callback wasn't firing, and that was due to
                                   //my data's not having a code attribute. You can a code attribute, of course.
                    cb(data);
                })
                .error(function(data, status, headers, config) {
                    alert(status + " | bad");
                });
            }}
        });

var app = angular.module('your_app', ['myCloudinary', 'cloudinary']);

app.controller('yourControllerForTheUploadTag', ['$scope', 'cloudinary', function($scope, cloudinary) {
    cloudinary.getUploadAttrs("image", function(data) {
        $scope.cloudinaryData = data;
    });
}]);

Your problem may be due to the success callback not firing (that was the problem for me, at least).

jbcpollak commented 10 years ago

Hi Guys, thanks for the feedback, I haven't had time to review your issues, but I wanted to point out cloudinary has an official angular plugin now, you might want to review that, they will probably offer better support than I can:

https://github.com/cloudinary/cloudinary_angular

humble-coder commented 10 years ago

This helps! Thank you (I also managed to work with your code as well, so thanks again!).

On Thu, May 29, 2014 at 1:39 PM, Joshua Chaitin-Pollak < notifications@github.com> wrote:

Hi Guys, thanks for the feedback, I haven't had time to review your issues, but I wanted to point out cloudinary has an official angular plugin now, you might want to review that, they will probably offer better support than I can:

https://github.com/cloudinary/cloudinary_angular

— Reply to this email directly or view it on GitHub https://github.com/jbcpollak/cloudinary_angular/issues/11#issuecomment-44560602 .