00962796275756
Configure Summernote Image Upload Callback
on 04/06/2025
Configure Summernote Image Upload Callback

Hello, 

If you need to configure Summernote editor to upload images to your server and return the URL, you can follow steps below, I am using Asp.net core as backend:

Basic Initialization:

   $('#Description').summernote({

       height: 400,

       callbacks: {

           onImageUpload: function (files, editor, welEditable) {

               sendFile(files[0], editor, welEditable, "Description");

           }

       }   });

Add the SendFile function :

    function sendFile(file, editor, welEditable, editorId) {

        let url = "/Main/Misc/UploadeSummernoteFile";

        formData = new FormData();

        formData.append("SummernoteFile", file);

        $.ajax({

            type: "POST",

            url: url,

            data: formData,

            cache: false,

            contentType: false,

            processData: false,

            success: function (FileUrl) {

                var imgNode = document.createElement("img");

                imgNode.src = FileUrl.url;

                $("#" + editorId).summernote("insertNode", imgNode);

            },

            error: function (data) {

                alert(data.responseText);

            }

        });

    }

This function will call API to save the file and return Image URL back, onImageUpload function is responsible to add the image in editor.

Account
0
Wishlist
0
Cart