Laravel 5 & Summernote - Uploaded image not showing up

Question

I'm trying to install summernote on my website built upon Laravel 5. However, no matter what I do, I cannot make an uploaded image file show up on an editor.

$(document).ready(function() {
$.ajaxSetup({
    headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
$('#summernote').summernote({
    height: 400,
    onImageUpload: function(files) {
        data = new FormData();
        data.append("image", files[0]);
        $.ajax({
            data: data,
            type: "POST",
            url: "/image/upload",
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                console.log(url);
                // trying to make the image show up here...
            }
        });
    }
});

And this is php code and it works.

public function upload_image(ImageRequest $request)
{
    if($request->hasFile('image')){
        $filename = str_random(20).'_'.$request->file('image')->getClientOriginalName();
        $image_path = base_path() . '/public/images/thread/';
        $request->file('image')->move(
            $image_path, $filename
        );
        echo $filename;    
    }
    else{
        echo 'Oh No! Uploading your image has failed.';
    }
}

I'm using the most recent master version of Summernote and here's the list of things I've tried so far:

Found a similar question and tried what it says but no luck.
Visited Summote API documentation and tried '$summernote.summernote('insertNode', imgNode);' but only gets error - complaning 'TypeError: a.nodeName is undefined'.
Well, My codes are based on this but 'editor.insertImage(welEditable, url);' is already deprecated so not useful anymore.
Tried the following codes based on #2. Basically trying to see if images from other websites can be added - assuming my image path is wrong. But not working.

//Full path?

$('#summernote').summernote("insertImage", 'http://animalia-life.com/data_images/fish/fish1.jpg');

//If not, full path with 'filename' option?

$('#summernote').summernote("insertImage", 'http://animalia-life.com/data_images/fish/fish1.jpg','filename');

//If not, path + filename?

$('#summernote').summernote("insertImage", 'http://animalia-life.com/data_images/fish','fish1.jpg');

//If not, path + / ?

$('#summernote').summernote("insertImage", 'http://animalia-life.com/data_images/fish/','fish1.jpg');
Tried if data image can be added, and IT WORKS. BUT WHY.

//data image?

$('#summernote').summernote("insertImage", 'data:image/jpeg;base64,/9j/4AAQSkZ...blahblah....');

At this point, I learned that $('#summernote').summernote("insertImage", ... ) is actually working but the image url parameter is possibly not. Has anyone successfully implemented this feature with the latest version of Summernote? or... Am I missing something here?

Here is a good solution i provide you of all you want ....... just go to this link somrat.info/summarnote-image-upload-with-laravel — Nazmul Hossain

Raccoon Raccoon · Accepted Answer · 2015-07-28T20:21:17

Figured it out.

base_path() gives me a physical local path of the uploaded file on my PC. However, this whole thing is running on MAMP. Thus, url has to be something like 'http://localhost:8888/image/......'

$(document).ready(function() {
var IMAGE_PATH = 'http://localhost:8000/images/thread/';

$.ajaxSetup({
    headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content')     }
});
$('#summernote').summernote({
    height: 400,
    onImageUpload: function(files) {
        data = new FormData();
        data.append("image", files[0]);
        $.ajax({
            data: data,
            type: "POST",
            url: "/image/upload",
            cache: false,
            contentType: false,
            processData: false,
            success: function(filename) {
                var file_path = IMAGE_PATH + filename;
                console.log(file_path);
                $('#summernote').summernote("insertImage", file_path);
            }
        });
    }
});

});

Laravel 5 & Summernote - Uploaded image not showing up

1 Answers