agilasadi's avatar

Implementing summernote and uploading image issue

I'm trying to upload images withing the summernote, the problem is, when i return the filename after upload, i can not insert it in the editor, like it does return the name, i can output it in console but does not add up to the rest of path. here is the code

    $('#texteditor').summernote({
        height: 400,
        callbacks: {
            onImageUpload: function(file, editor, welEditable) {
                uploadImage(file[0], editor, welEditable);
            }
        }
    });

    function uploadImage(file, editor, welEditable) {
        var data = new FormData();
        data.append("file", file);
        data.append("_token", globalToken);
        data.append("article_token", article_token);
        $.ajax({
            type: "POST",
            url: uploadArticleImages,
            data: data,
            success: function(url) {
                console.log(url);
                var image = $('<img>').attr('src','http://localhost/appName/public/storage/article_resim/' + url);
                $('#texteditor').summernote("insertNode", image[0]);
                console.log("success");



            },
            cache: false,
            contentType: false,
            processData: false,
            error: function(data) {
                console.log(data);
            }
        });
    }

the url i receive for the image is

  http://localhost/appName/public/storage/article_resim/[object%20Object]

but it shows me the actuall filename in the console with "url"

0 likes
1 reply
neilstee's avatar

Can you this:

  • try your actual image if it works (via browser)
  • if it works, then your image upload is working
  • now try $('#texteditor').summernote("insertNode", '<img src="yourimageurlhere" >');

lets see what will happen

Please or to participate in this conversation.