Summernote image upload not working

Question

I am having a problem with summernote Image Upload.

My script looks some what like this:

<script>
 $(document).ready(function() {

var IMAGE_PATH = 'http://localhost/dist/images/';

$('.summernote').summernote({
    height: 300,
    callbacks : {
        onImageUpload: function(image) {
            uploadImage(image[0]);
        }
    }
});

function uploadImage(image) {
    var data = new FormData();
    data.append("image",image);
    $.ajax ({
        data: data,
        type: "POST",
        url: "uploader.php",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
            var image = IMAGE_PATH + url;
            $('.summernote').summernote('insertImage', image);
            },
            error: function(data) {
                console.log(data);
                }
        });
    }

});
</script>

and uploader.php has following codes:

<?php
$image = $_FILES['image']['name'];
$uploaddir = 'images/';
$uploadfile = $uploaddir . basename($image);
if( move_uploaded_file($_FILES['image']['tmp_name'],$uploadfile)) {
    echo $uploadfile;
} else {
    echo "Unable to Upload";
}
?>

Image files are uploading successfully to the dir 'images'.

But $('.summernote').summernote('insertImage', image); doesn't append the uploaded Image Link to the editor.

What am i missing ? And yes, i tried alerting the var 'image' and it has the required value.

Answer 1

Use the code below. It should work perfectly

PHP Script

<?php

// include Database connection file
require_once("../../resources/directories.inc.php");

if (isset($_FILES['file']['name'])) {
    if (!$_FILES['file']['error']) {
        $name = rand(100,1000).'_'.date('Ymd');
        $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
        $filename = $name.'.'.$ext;
        $destination = '../../uploads/news/'.$filename; //change this directory
        $location = $_FILES["file"]["tmp_name"];
        move_uploaded_file($location, $destination);
        echo BASE_URL.'uploads/news/'.$filename;
    } else {
        echo 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
    }
}

?>

JS CODE

$('.summernote_editor').summernote({
    tabsize: 2,
    height: 400,
    spellCheck: true,
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'underline', 'italic', 'superscript', 'subscript', 'clear']],
      ['fontname', ['fontname','fontsize']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'help', 'undo', 'redo']],
    ],
    callbacks: {
        onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0], editor, welEditable);
        }
    }
});

function sendFile(file, editor, welEditable) {
    var lib_url = '<?php echo BASE_URL."resources/library/upload_summernote.lib.php"; ?>';
    data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: lib_url,
        cache: false,
        processData: false,
        contentType: false,
        success: function(url) {
            var image = $('<img>').attr('src', url);
            $('.summernote_editor').summernote("insertNode", image[0]);
        }
    });
}

Answer 2

you can try :var IMAGE_PATH = 'http://localhost/dist/'; because your php codes :$uploadfile=>'images/xxx.jpg', the html url use the twice images,like ../images/images/xxx.jpg. so summernote image upload not working! thanks!

it's my codes

  <script>
 $(document).ready(function() {

var IMAGE_PATH = 'http://localhost:81/summernote-develop/examples/';

$('.summernote').summernote({
    height: 300,
    callbacks : {
        onImageUpload: function(image) {
            uploadImage(image[0]);
        }
    }
});

function uploadImage(image) {
    var data = new FormData();
    data.append("image",image);
    $.ajax ({
        data: data,
        type: "POST",
        url: "uploader.php",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
            var image = IMAGE_PATH + url;
            $('.summernote').summernote('insertImage', image);
			//console.log(image);
            },
            error: function(data) {
                console.log(data);
                }
        });
    }

});
</script>

the php codes as same as you.

and codes dir:D:\WWW\summernote-develop\examples\ images dir:D:\WWW\summernote-develop\examples\images