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}}">

Answer 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...