summernote image upload and alternative not working

Question

I am using summernote editor on my site and have implemented it using the Click2edit method mentioned on their site here.

However the image upload if used as it is causes all sorts of problems. My understanding is this is using something called base64. I tried to replace this with a more straight forward file upload to the server using code from another stackoverflow answer [here]. (Summernote image upload) However it doesn't seem to be doing anything, the image still gets inserted the original method. If you could help me work out how to correctly implement this.

in terms of the error, my site has several tabs, one of those tabs includes the click2edit summernote editor, when I tried and use the image upload and save it, the picture doesn't display and it combines the tabs as 1 page (likely some special character somewhere causes a problem?). Secondly the sql column which is a text datatype shows no content when viewed in sql management studio and the content is editable, gives some kind of saving error. I ended up needing to delete the entry all together to return things to normal.

my code:

to implement summernote:

<div class="click2edit">click2edit</div>

var edit = function() {
 $('.click2edit').summernote({focus: true});
};
var save = function() {
  var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML:     array).
  $('.click2edit').destroy();
};

for the file upload I am using:

$(document).ready(function() {
    $('#summernote').summernote({
        height: 200,
        onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0], editor, welEditable);
        }
    });

    function sendFile(file, editor, welEditable) {
        data = new FormData();
        data.append("file", file);
        $.ajax({
            data: data,
            type: "POST",
            url: "form_summernote_doc_upload_post.php",
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                editor.insertImage(welEditable, url);
            }
        });
    }
});

I should also mention the output is being uploaded to sql usinga Post which includes

(stuff)....sql_safe($Postarray[text])....(stuff)

I thought it might be to do with the fact I am using click2edit method of initiating summernote rather then giving it a straight forward #summernote id. But I tried that also and the result was the same. I also do not understand how to disable summernotes own method of uploading, maybe that is overriding. thanks

Answer 1

Summer note new version passes only one argument. So you can use this script

$('.summer').summernote({
    height: "200px",
    callbacks: {
        onImageUpload: function(files) {
            url = $(this).data('upload'); //path is defined as data attribute for  textarea
            sendFile(files[0], url, $(this));
        }
    }
});

function sendFile(file, url, editor) {
    var data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: url,
        cache: false,
        contentType: false,
        processData: false,
        success: function(objFile) {
            editor.summernote('insertImage', objFile.folder+objFile.file);
        },
        error: function(jqXHR, textStatus, errorThrown) {
        }
    });
}