CollectionFS Meteor, WYSIWYG, Summernote, Image Upload

Question

Good Evening everyone.

I've been struggling with getting file upload to work in Meteor using WYSIWYG editors and collectionFS. I've been trying with Summernote, but I don't mind using Redactor or Froala.

I am not skilled enough apparently to connect the WYSIWYG editor with CollectionFS to upload files to a local path.

Here are my codes.

Template.postSubmit.rendered = function(){
    $('#edit').summernote();

};


Template.postSubmit.events({
  'submit #postSubmit':function(event, template) {
    FS.Utility.eachFile(event, function(file) {
      Images.insert(file, function (err, fileObj) {
        //Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
      });
    });
  }
});

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

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

From my short knowledge, I have to add the

onImageUpload: function(files, editor, welEditable) {
                        sendFile(files[0],editor,welEditable);
                       }

within the summernote script (do I?).

I cannot seem to make this work! Pointers, guides and help would be greatly appreciated...

EDIT1:

Template.postSubmit.rendered = function(){
    $('#edit').summernote({
        onImageUpload: function(file) {
    FS.Utility.eachFile(event, function(file) {
      Images.insert(file, function (err, fileObj) {
        //Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
      });
    });
  } 
    });
};

So I've edited my code to this, and now it is working! It uploads the file to the specified path. The problem now is, 1. It will upload the image right away (as soon as I click on add image and not when I submit the form in). 2. Image uploaded wont be shown in the editor.

Answer 1

This works for me :

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

        }   
    });
}