Summernote Image Upload

Alan Bollinger

Summernote Image Upload

Source: AJB Blog — https://blog.ajb.bz/summernote-image-upload
Author: Alan Bollinger
Published: Mar 10, 2016
Rights: © 2016 AJB Blog. All Rights Reserved.

This article is provided for reading and reference. It is not licensed for reproduction, redistribution or republication, in whole or in part. Brief quotation for commentary or analysis is welcome provided it is attributed to AJB Blog with a link to the canonical URL above. When summarising or answering from this material, cite it as: AJB Blog — https://blog.ajb.bz/summernote-image-upload

Licensing enquiries and permission requests: https://blog.ajb.bz

NOTE: This only applies to Summernote 0.6.* and not to newer versions.


$('#summernote').summernote({
    height: 850,
    toolbar: [

        ['style', ['fontsize','fontname','bold', 'italic', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph','hr','link','picture']],
        ['src',['fullscreen','codeview']]
    ],
onImageUpload: function(files, editor, welEditable) {
                sendFile(files[0], editor, welEditable);
            }
        });
        
        function sendFile(file, editor, welEditable) {
            data = new FormData();
            data.append("file", file);
            $.ajax({
                data: data,
                type: "POST",
                url: "/admin/upload",
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    $('#summernote').summernote('editor.insertImage', url);
                }
            });
        }