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 <input> tag code as well? Also, shouldn't the public_id assignment occur within the success block of the _upload_file callback? — Nadav Ofir
@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
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: cloudinary.com/blog/… — Nadav Ofir
Thanks that's a silly error I made. I'll try to make the changes.Any luck with the public_id problem? — Thinkerer
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

Nadav Ofir Nadav Ofir · Accepted Answer · 2016-12-14T13:30:06

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

public_id is not defined Meteor+Cloudinary

1 Answers