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.

http://stackoverflow.com/questions/21628222/summernote-image-upload Hope this help. — Roxx, Jan 04 '15 at 06:00
This question seams to be a duplicate: https://stackoverflow.com/questions/27449455/collectionfs-meteor-js-summernotewysiwyg-and-file-upload/31512800#31512800 We have NO working solution yet! — daslicht, Jul 20 '15 at 09:19

score 0 · Answer 1 · answered Jul 21 '15 at 10:00

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

        }   
    });
}

CollectionFS Meteor, WYSIWYG, Summernote, Image Upload

1 Answers1