CollectionFS, Meteor.js, Summernote(WYSIWYG) and file upload

Question

I'm working on a project using Meteor.js, Summernote and Collection FS.

First of, here is my code.

Template.postSubmit.rendered = function() {
   $('#summernote').summernote({
        height: 400,
        maxHeight:800,
        minHeight:250,
        onImageUpload: function(files, editor, $editable) {
        Images.insert(files[0], function (err, fileObj) {
            editor.insertImage($editable, fileObj.url());    
        });
      }
   });

The image when inserted does successfully go into the specified URL for image storage. Here is the CollectionFS javascript.

Images = new FS.Collection("images", {
  stores: [new FS.Store.FileSystem("images", {path: "~/img"})]
});

Images.allow({
  insert: function() {
    return true;
  },
  update: function() {
    return true;
  },
  remove: function() {
    return true;
  },
  download: function() {
    return true;
  }
});

I was wondering if anyone could guide me in the right direction. I've been told the URL on callback is not defined. So, I've been asked to try this code, using a setTimeout function. However, I've still had no luck.

onImageUpload: function(files, editor, $editable) {
        Images.insert(files[0], function (err, fileObj) {
          setTimeout(function() {
            editor.insertImage($editable, fileObj.url());
          }, 300)
        });
      }

Has anyone succeeded through using summernote in this manner in Meteor.js and collectionFS?

If so, please help me. If this gets solved, I'll be posting a tutorial for many meteor.js users. I believe it will be a great contribution.

Also, even if you're not using Meteor.js or CollectionFS, if you can pitch in your two cents, it would be greatly appreciated.

Thanks!

Answer 1

Here is another solution besides using setTimeout:

Template.blogList.rendered = function() {
    var template = this;
    $('#summernote').summernote({
        height: 400,
        maxHeight:800,
        minHeight:250,
        onImageUpload: function(files, editor, $editable) {

            Images.insert(files[0], function (err, fileObj) {
                console.log("after insert:", fileObj._id);
                template.autorun(function (c) {
                  fileObj = Images.findOne(fileObj._id);
                  var url = fileObj.url();
                  if (url) {
                    $("#summernote").summernote("insertImage", fileObj.url(), "Image Title"); 
                    c.stop();
                  }
                });
            });

        }   
    });
}