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);

  });

}

zim · Accepted Answer · 2017-01-01T23:15:16.220

0

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);
    });
}

edited Jan 01 '17 at 23:15

answered Jan 01 '17 at 21:27

zim

2,386
2
14
13

Thanks zim. I downgraded the cloudinary package. I get this error now: – sutebu Jan 01 '17 at 22:42
`Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. at functions.coffee:67 at Function._.each._.forEach (underscore.js?hash=cde485f…:152)` I tried giving it an array as the argument, and using _upload_file function instead, but no luck. I wonder if the data from `Session.get('photo');` is the correct filetype for the cloudinary function? – sutebu Jan 01 '17 at 22:45
@sutebu, have you tried it using an input tag instead? i've updated by answer with how i do it. – zim Jan 01 '17 at 23:04
Thank you @zim! Got it working with your input tag. This showed me it wasn't some other issue so I explored converting my base64 imageURL to a blob using this: http://stackoverflow.com/questions/23150333/html5-javascript-dataurl-to-blob-blob-to-dataurl Works great! :) – sutebu Jan 02 '17 at 01:35

Meteor and Cloudinary - Callback not firing

1 Answers1