Meteor and Cloudinary - Callback not firing

Question

Trying to add Cloudinary to my Meteor app.

Images are not getting to the Cloudinary media library, and the upload function callback is not firing. I'm aware there have been issues before, but nothing I do seems to help:

https://github.com/Lepozepo/cloudinary/issues/21

Meteor: Cloudinary

How to integrate Cloudinary with Meteor

Template.commentSubmit.events({
    'submit form': function(e, template) {
    e.preventDefault();

    var image = Session.get('photo'); // get image from mdg:camera
    //console.log(image);

    Cloudinary.upload(image, function(err, res) {
      if (err){
        console.log("Error: " + err);
        return;
      }
      console.log("Success: " + res);
    });

// code adding comment and image to mongodb

});

Server:

Cloudinary.config({
  cloud_name: '****',
  api_key: '****',
  api_secret: '*****'
});

Client:

$.cloudinary.config({
  cloud_name: "******"
});

If I upload the image to the Cloudinary dashboard manually it displays the image no problem. Using latest version of Meteor and lepozepo:cloudinary

Any and all help / suggestions appreciated! :)

UPDATE - Got it working with this:

var image = Session.get('photo');

if(image){ // check if post also includes image
  var files = [];
  files.push(dataURLtoBlob(image));

  let options = {
    folder: "app",
    image_metadata: true
  };

  var imageURL = ""; // loading gif

  Cloudinary.upload(files, options, function(err, res) {

      if (err){
        console.log("Error: " + err);
        return;
      }
      //console.log(res);
      imageURL = res.secure_url;
      //console.log(imageURL);

  });

}

Answer 1

i ran into the same issue and "solved" it by using an earlier version of the package. my .meteor/packages now has this:

lepozepo:cloudinary@=4.2.2

update:

i'm not using mdg:camera to get the data, just a simple input. on desktop, it presents the file browser. on iOS, it shows the "Take picture / Choose from library" panel. (and it works on Android, too).

the code looks like this:

html:

<input type="file" id="upload-image" class="file_bag" accept="image/*">

js:

'change #upload-image': function(event, template) {
    event.preventDefault();

    let files = $('input.file_bag')[0].files;

    let options = {
        folder: Meteor.userId(),
        image_metadata: true
    };

    Cloudinary.upload(files, options, function(error, result) {
        console.log(result.public_id);
    });
}