Summernote Show Images that have been uploaded to

Question

I am using the really nice Summernote Editor for a little webapp. Instead of using the default inline base64 code for images I am storing the images in a folder.

I have that part working as intended. I am able to click the "image" icon and select an image and it will upload it to a folder on my server in its original type (jpg, png, gif).

The problem is that even though the image gets uploaded properly, Summernote does not add it to the editor ... so it doesn't show.

Here is the relevant code I am using:

    $(function() {
     $('.summernote').summernote({
      lang: 'en-EN',
      height: 500,
      onImageUpload: function(files, editor, $editable) {
      sendFile(files[0],editor,$editable);
      }  

    });
    function sendFile(file,editor,welEditable) {
      data = new FormData();
      data.append("file", file);
       $.ajax({
       url: "uploader.php",
       data: data,
       cache: false,
       contentType: false,
       processData: false,
       type: 'POST',
       success: function(data){
       alert(data);
        editor.insertImage(welEditable, data);
    },
       error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus+" "+errorThrown);
      }
    });
   }

  });

The uploader.php file looks like this:

<?php
  // A list of permitted file extensions
    $allowed = array('png', 'jpg', 'gif','zip');

if(isset($_FILES['file']) && $_FILES['file']['error'] == 0){

$extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);

if(!in_array(strtolower($extension), $allowed)){
    echo '{"status":"error"}';
    exit;
}

    if(move_uploaded_file($_FILES['file']['tmp_name'],
    'images/'.$_FILES['file']['name'])){
    $tmp='images/'.$_FILES['file']['name'];
    echo 'images/'.$_FILES['file']['name'];
    //echo '{"status":"success"}';
    exit;
    }
   }

echo '{"status":"error"}';
exit;
?>

Any ideas as to why the Summernote editor will not show the saved (stored) images in the editor?

Thanks

Answer 1

You must use "callbacks: {}" method. like this:

$('.summernote').summernote({
    height: 500,
    tabsize: 4,
    callbacks: {
        onImageUpload: function(files, editor, $editable) {
            console.log('onImageUpload');
            sendFile(files[0],editor,$editable);
        }
    }});

Answer 2

In the new version of summernote onImageUpload callback is called only with files argument. It means that editor is not available.

You can insert an image with:

$('.summernote').summernote("insertImage", url, filename);

In your case:

$('.summernote').summernote("insertImage", data, 'filename');

Answer 3

I did it using codeigniter may be this help someone.

 $(function() {
          $('.summernote').summernote({
              onImageUpload: function(files, editor, $editable) {
              sendFile(files[0],editor,$editable);
              }  
            });

           function sendFile(file,editor,welEditable) {
              data = new FormData();
              data.append("file", file);
               $.ajax({
               url: "http://localhost/fourm/media/editorupload",
               data: data,
               cache: false,
               contentType: false,
               processData: false,
               type: 'POST',
               success: function(data){  
                editor.insertImage(welEditable, data);              
            },
               error: function(jqXHR, textStatus, errorThrown) {
               console.log(textStatus+" "+errorThrown);
              }
            });
           }
    });