public_id is not defined Meteor+Cloudinary

Question

I get the above error message for image upload function using Lepozepo: CLoudinary package and the following details.

console.log shows successful upload and a file.
I do not see an image appearing after the upload. The profile image is also not changed. Probably undefined public_id, therefore unable to save it to Meteor.userId()?
progress bar doesnt show up

The delete button error

3rd error message after changing delete code

The codes below:

Server's config.js

Cloudinary.config({
  cloud_name    : 'XX',
  api_key       : 'XX',
  api_secret    : 'XX'
});
Cloudinary.rules.delete = function() {
  var userId = "my_user_id";
  return this.public_id;
};
Cloudinary.rules.signature = function() { return this.userId;};
Cloudinary.rules.private_resource = function() {return this.userId; };

Client - upload.js

Template.upload.onCreated(function(){
   var self = this;
   self.autorun(function(){ 
      self.subscribe('user',  Meteor.userId());    
      $.cloudinary.config({ cloud_name: "XX", api_key: 'XX'}); 
   });
});

Template.upload.events({   
   'submit form': function(e, t) { 
      e.preventDefault(); 
      var files = [];
      var file = $('#userimage')[0].files[0]; 
      files.push(file);
      console.log(files);

     Cloudinary.upload(files, {}, function(err, res) {
       if (err){
         console.log("Error: " + err + ",due to: " + err.reason);
     } else {

       // preview segment 
      $('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {  
       $('.preview').html(
         $.cloudinary.image(data.result.public_id, { format: data.result.format, version: data.result.version, crop: 'fill', width: 150, height: 100 })
        );    
        $('.image_public_id').val(data.result.public_id);    
        return true;
      });

     // progress bar
     $('.cloudinary-fileupload').bind('fileuploadprogress', function(e, data) { 
       $('.progress_bar').css('width', Math.round((data.loaded * 100.0) /        data.total) + '%'); 
    });

    Meteor.users.update({ _id: Meteor.userId() }, { 
      $set: { 'profile.profilepicId'  : res.public_id }
    });
    console.log("Success :" + res);              
  },
  'click #delete': function (public_id) {
      Cloudinary.delete("response.public_id", public_id, function(err, res){
         if(err) {
            console.log("Error: " + err + ",due to " + err.reason);
         } else { 
            console.log("Success :" + res);
            Meteor.users.update({ _id: Meteor.userId() }, { 
               $set: { 'profile.profilepicId'  : {} }
            });
         }
      });
   }
});

Client - upload.html

 <form>
   <input type="file" id="userimage" name="userimage" class='upload_field cloudinary-fileupload' /> <!-- edited as per suggested --> 
     <!-- the below progress bar and thumbnail preview not working --> 
     <div class="progress_bar" style='background-color: red, height: 20px'></div>
     <div class='thumbnails'></div>

       {{#each file}}
          <p> {{percent_uploaded}}% done</p> <!-- works but only shows number --> 
       {{/each}}
     <button id="submit">Upload</button>
     <button id="delete">Delete</button>
 </form>

Client - profile.

Template.profile.helpers({
   profilepicId: function (){
      var u = Meteor.user();
      return u.profile.profilepicId
   },
   file: function () {
      return Cloudinary.collection.find();
   }
});

Client - profile.html

<img src="{{c.url profilepicId format=format crop='thumb' width=200 height=200}}">

Can you add the rendered tag code as well? Also, shouldn't the public_id assignment occur within the success block of the _upload_file callback? — Nadav Ofir, Dec 12 '16 at 15:15
@NadavOfir I added the input code. Not sure what you mean by the 2nd question. Appreciate if you can elaborate more? So it shows a file registered, then no public_id, and then shows success with [object Object]. — Thinkerer, Dec 12 '16 at 15:50
`fileuploadprogress` doesn't kick because the element class (cloudinary-fileupload) doesn't correspond to the the class of the actual input field (cloudinary_fileupload). Once this is working for you, try to also bind the `cloudinarydone` and handle the response from there, i.e. update your model. See: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery — Nadav Ofir, Dec 13 '16 at 08:35
Thanks that's a silly error I made. I'll try to make the changes.Any luck with the public_id problem? — Thinkerer, Dec 13 '16 at 12:01
the `public_id is unknown at this stage. you should initialize it either based on `res` within the success block of your _upload_file() call, or by using the `cloudinarydone` event which returns the upload result as well. Makes sense? — Nadav Ofir, Dec 13 '16 at 13:41

score 1 · Accepted Answer · answered Dec 14 '16 at 13:30

1

Following our correspondence above, please try something like the following (collection update moved to inside of the upload response handler):

  Cloudinary._upload_file(files[0], {}, function(err, res) {
     if (err){
        console.log("Error: " , err, err.reason);
        return;
     } else {
        console.log("Success :" + res);
        Meteor.users.update({ _id: Meteor.userId() }, { 
            $set: { 'profile.avatar': res.public_id }
        });
     }
  });

Hope this makes more sense now...

answered Dec 14 '16 at 13:30

Nadav Ofir

778
4
6

Hi Nadav, the upload works ok but I used `Cloudinary.upload(files, {}, function(err, res) {` based on new version updates from package owner. However the progress bar, preview and delete is still not working. Bar doesnt show and delete just refreshes page and says `res` is not defined Maybe you can show how I should include it in the above code. – Thinkerer Dec 19 '16 at 11:12
@Thinkerer Please update your code above or share a live URL where this can be reproduced. It's difficult to say without seeing the network communication. – Nadav Ofir Dec 20 '16 at 13:20
Updated the lines. 2 issues: [1] delete doesnt work and throws max call stack error; [2] smaller issues, cant get progress bar and preview image to work. – Thinkerer Dec 20 '16 at 13:49
@Thinkerer [1] Can you share the stack trace / error message? [2] Try wrapping the `progress_bar` div with another one which has a well defined width (e.g. `
`)
– Nadav Ofir Dec 21 '16 at 16:32
the error message picture is right below the first error message image. Or do you want an expanded version? Error probably means im inputting something thats too large like an entire collection or something. The progress bar still dont show up, maybe its the package im using? The number does jump to 100% when uploaded. Maybe a DIY progress bar.. – Thinkerer Dec 22 '16 at 07:40
@Thinkerer On `Cloudinary.delete(...)` call, first parameter should be the public ID of the resource which you wish to delete (currently it has some meaningless hard-coded string), and the second parameter, while I'm not sure what its purpose, putting `null` worked for me. Care to try? – Nadav Ofir Dec 22 '16 at 16:06
Do you mean replace `"response.public_id"` with `public_id`? The former was provided by Cloudinary so I tried permutations of it. I did try what you suggested. `public_id` or `response.public_id`, while removing 2nd parameter. It would return public_id or response is not defined. Same goes if i use null for 2nd parameter. Let me try around it and will post findings shortly. – Thinkerer Dec 22 '16 at 16:49
@Thinkerer first parameter should be the public_id of the image which you're trying to delete. You must get it from somewhere, of course public_id & result are not defined in this scope. Looks like you're missing the data, once you'll have it then the rest should work smoothly. – Nadav Ofir Dec 22 '16 at 21:13

public_id is not defined Meteor+Cloudinary

1 Answers1

Linked