Summernote Save Uploaded Images on Server

[moeabdol]

I have summernote in my Rails 4 application. I understand that summernote converts images to base64 and once I submit it saves the images directly on the back-end database server. I'm using Mysql, and surprisingly with 3MB images I get weird errors complaining about losing connection to the database. I investigated the issue and it seems that the base64 string generated is too long which in turn creates a long request and mysql is then forced to drop the connection.

I tried to change the column datatype of my content to LongBlob; however, this doesn't fix the problem. The only way I can get around this is by uploading small images 300kb and so.

I think this is not how images are meant to be stored in the first place, and wonder if anyone has faced a similar problem, and how you can work around this to store the images directly on the server's file system say on a folder called /blog_images and then retrieve the images when needed.

I understand that I have to use onImageUpload function in my javascript, but have not managed to fully implement it correctly. If anyone can shed light on how to go about this it would be greatly appreciated.

[bbyrdhouse]

Hi,

I recently ran into the same type of problem where I wanted to implement onImageUpload so that images were uploaded to the server instead of stored as base64.

The process is basically a two part solution:

1. You need to tell the editor.php page to use onImageUpload instead of base64 and
2. You need to include an uploader.php file that uploads the image and then returns the image back to the canvas and stores it in a folder on the server.

There is probably a better way of doing it but here is what I am doing

Included in the Editor.php file:

 $(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: "uploader.php",
           data: data,
           cache: false,
           contentType: false,
           processData: false,
           type: 'POST',
           success: function(data){
           alert(data);
            $('.summernote').summernote("insertImage", data, 'filename');
        },
           error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus+" "+errorThrown);
          }
        });
       }
});

Now here is the code from the 'uploader.php' file:

    <?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'];
     $new = '../images/'.$_FILES['file']['name']; //adapt path to your needs;
     if(copy($tmp,$new)){
     echo 'images/'.$_FILES['file']['name'];
    //echo '{"status":"success"}';
    }
     exit;
    }
    }
     echo '{"status":"error"}';
     exit;
    ?>

Like I said, there is probably a better way to accomplish this but it works great for my purposes.

[moeabdol]

Thanks @bbyrdhouse
However, I was wondering if there is a rails solution to this.

[luciuschoi]

Recently, I wrote a blog about Rails solution on this. But I'm sorry it is written in Korean.
http://wp.me/pJq4B-bt
But maybe you might walk through the example codes of this blog without understanding Korean characters.
Good luck!

[moeabdol]

@luciuschoi thank you so much. I was able to follow the post; however, I haven't implemented it yet. Thank you again for the great post.

[noveweb]

Fail for me: editor is undefined.

[atupac]

Hi guys.

i'm here after sometimes spent on other pretty buggy/paying editors (Tinymce/ckEditor).
Now thanks god such a simple & efficient tool as summernote exists. Easy to learn & fast to set.

Now i need to be able to upload different type of files to my mysql/php server, and i'm going to try your given Ajax solution : is there a way to profit of image button to upload other files than images ?

PS: yeah i have tested the video button and that's cool (dailymotion links still fail to show correctly though for all pepole ^^) and image button.

Now i need an AnyFile button upload :)

Thanks.

[pherdee]

Hi guys,
I've made small changes on the editor,

The original summernote converts uploaded images to base64 format.
This editor uploads images to the file system,
Just make sure that you have write access to img-uploads folder.

https://github.com/pherdee/summernote-img-upload

[EdgarVarg]

so easy bro in our data base make a row with data type long text and this save the images

[maximusmcc]

Great job guys. i used the code and improvised it a little for the PHP users here. https://a1websitepro.com/store-image-uploads-on-server-with-summernote-not-base-64/ Thanks for the help I hope I can help someone too. :-)

[DennisSuitters]

Are you guys aware there is https://github.com/summernote/awesome-summernote that already has plugins/addons for manipulating images?

[maximusmcc]

Yes but we were talking about "saving" images not manipulating them. :-) @diemendesign

[DennisSuitters]

There are also a few that save them.

[PadharaHitesh]

Is there any solution of the use multiple summernote when file upload in nodejs?

[ayacoda]

Guys, it is as simple as this, just update your summernote.js file and find where it reads: onImageUpload: null to the following:

onImageUpload: function(files) {
var $editor = $(this);
var data = new FormData();
data.append('file', files[0]);
$.ajax({
url: 'file-upload.cfm',
method: 'POST',
data: data,
processData: false,
contentType: false,
success: function(response) {
console.log(response);
$editor.summernote('insertImage', response);
}
});
},

In your file-upload.cfm you should be receiveing a form.file varaible which is your selected file to upload, once uploaded, return the path to the file eg: https://www.test.com/example.jpg as a string and that should work like magic, just make sure when you apply your changes to the .js file that you clear your browser cache.

[lorddubbs]

Hi,

I recently ran into the same type of problem where I wanted to implement onImageUpload so that images were uploaded to the server instead of stored as base64.

The process is basically a two part solution:

1. You need to tell the editor.php page to use onImageUpload instead of base64 and
2. You need to include an uploader.php file that uploads the image and then returns the image back to the canvas and stores it in a folder on the server.

There is probably a better way of doing it but here is what I am doing

Included in the Editor.php file:

 $(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: "uploader.php",
           data: data,
           cache: false,
           contentType: false,
           processData: false,
           type: 'POST',
           success: function(data){
           alert(data);
            $('.summernote').summernote("insertImage", data, 'filename');
        },
           error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus+" "+errorThrown);
          }
        });
       }
});

Now here is the code from the 'uploader.php' file:

    <?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'];
     $new = '../images/'.$_FILES['file']['name']; //adapt path to your needs;
     if(copy($tmp,$new)){
     echo 'images/'.$_FILES['file']['name'];
    //echo '{"status":"success"}';
    }
     exit;
    }
    }
     echo '{"status":"error"}';
     exit;
    ?>

Like I said, there is probably a better way to accomplish this but it works great for my purposes.

This uploads the image but does not display image in editor while typing

[Zhem87]

sdfg### ###

• @ Anchor popover position bug #1. > _****_