Summernote: Image content empty in onImageUpload callback

[yumweb]

Hello There,

I have been trying to upload the image from Summernote to server. Below is the code that I have used and the screenshot of the console of the output.

Anyone has any idea what this issue is?

$('#editor').summernote({
        toolbar: [
            ['style', ['bold', 'italic', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link', 'picture', 'video']]
        ],
        height: 300,
        options:[ 'maxlength', ['10'] ],
        placeholder: 'Your content here.',
        callbacks: {
            onImageUpload: function(image, editor, welEditable){                

                console.log(image); //File content 0
                console.log(editor); //undefined
                console.log(welEditable); //undefined

                var data = new FormData();
                data.append('file', image[0]);

                $.ajax({
                    method: 'POST',
                    name: 'image',
                    url: '/upload',
                    cache: false,
                    contentType: false,
                    processData: false,
                    file: data,
                    headers: {
                        'CSRF-Token': '<%= _csrf %>'
                    },
                    success: function(json){
                        console.log(json);
                        var result = JSON.parse(json);
                        if(result.success){
                            $.each(result.msg, function(i, n){
                                if(n.error){
                                    alert(n.name+' uploaded failed: '+n.error);
                                }else{
                                    var image = $('<img>').attr('src', n.fileSrc);
                                    $('#editor').summernote('insertNode', image[0]);
                                }
                            });
                        }else{
                            $.each(result.msg, function(i, n){
                                alert(n.name+' uploaded failed: '+n.error);
                            });
                        }
                    }
                });
            }
        }
    });

[Adeweb-it]

I had the same problem.
I solved it using this code:

$('.html_editor').summernote({
    // ... other options
    callbacks: {
        onImageUpload: function(files) {
            sendFile(files[0], $(this));
        }
    }
});

function sendFile(file, editor) {
    data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: "YOUR URL",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
            console.log(url);
            editor.summernote('insertImage', url, "Name img");
        }
    });
}

[DiemenDesign]

I'm considering this resolved.