Use of Summernote WYSWIG Editor for Image upload

7 March 2016 by Archana Patil No comments

Hello, This post is related to WYSIWYG editors. Many times you might have a situation where you need to add images to your content or list of item in your content etc. To handle this situation we can use summer note WYSIWYG editor.SummerNote is an Open source free WYSIWYG editor (summer note) build to support Bootstrap theme framework. Summernote uses open source libraries(jQuery, Bootstrap)

Installation Of Summernote:

i. Download the summer note plugin.

ii. Include  Js and CSS files.

iii. Add div into body  <div id=”summer note”>Hello Summernote</div>

iv.Initialize summer note

OnImageUpload With Summernote

Sometimes we need to add images to our content and store that images to AWS.

But a problem is when we upload images using summer note it will convert images to Base64 data which is too large and it will be difficult for us to store this data to database as well as upload image to AWS s3 storage. To avoid this problem summer note provides OnImageUpload callback which helps to upload the image with proper URL and store image directly to s3 storage.

Below is the example of callback we used to store images to database as well as on the server.

  i.  I have Attachment model which stores all images.          

  ii. Here is the post method which creates a record for attachment and stored them on server

iii. call ajax on this method and upload an image with summer note callback.

sendFile is a function which creates record and inserts image to content on a success of ajax request. Then in summer note initialization we use callback OnImageUpload.

Note: In above example sendFile function is used to check for multiple files if there is any and add them individually to s3 storage with proper URL.

Archana Patil

Follow me on Twitter

Subscribe To Our Blog

Get access to proven marketing ideas, latest trends and best practices.

Next up home


Lets build cool stuff

Share your contact information & we will get in touch!

I want (Tell us more about your dream project)