Summernote Show Images that have been uploaded to a folder

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

score 4 · Accepted Answer · answered Jun 03 '15 at 12:34

4

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');

answered Jun 03 '15 at 12:34

woru

1,420
9
17

Ok, now I'm confused. Are you saying that in the most recent version of Summernote I will not need to send the image using php using a sendFile function like in the example above? The line of js you provided looks like it should do the trick but where should it be used? – KulerGary Jun 03 '15 at 13:10
I say that you should replace line editor.insertImage(welEditable, data); with $('.summernote').summernote("insertImage", data, 'filename'); – woru Jun 03 '15 at 21:30
Ahh ... Ok, I see it now. It does indeed return it to the editor although I seem to have the path to the images off somewhere because when saving it links to a different folder, but that is just something I need to sort. Thanks for the help! – KulerGary Jun 04 '15 at 14:57
Actually my onImageUpload is not triggering..in new version is it depreciated ? – Bastin Robin Dec 31 '15 at 06:19

score 2 · Answer 2 · answered Dec 10 '15 at 10:30

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);
              }
            });
           }
    });

score 2 · Answer 3 · answered Jan 26 '16 at 05:21

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);
        }
    }});

Summernote Show Images that have been uploaded to a folder

3 Answers3

Linked