Using Summernote In ASP.NET MVC (Saving Image Files Separately)

public class BlogPost  
{  
    /// <summary>  
    /// For Title of the Note  
    /// </summary>  
    public string Title { get; set; }  
    /// <summary>  
    /// To Save content of the Note which can be anything.  
    /// </summary>  
    [AllowHtml]  
    public string Content { get; set; }  
}  

using System;
using System.IO;
using System.Web;
using System.Web.Mvc;
using TrWebBlogEx.Models;

namespace TrWebBlogEx.Controllers
{
    public class SummerNoteExController : Controller
    {
        // GET: SummerNoteEx
        public ActionResult BlogEntry()
        {
            return View();
        }
    }
}

@model TrWebBlogEx.Models.BlogPost
@{
    ViewBag.Title = "Blog Entry";
}
<link href="~/Scripts/summernote/summernote.css" rel="stylesheet" />
<script src="~/Scripts/summernote/summernote.js"></script>
<h2>Index</h2>
<p class="panel panel-primary">
    <p class="panel-heading panel-head">Add Note</p>
    <p class="panel-body">
        @using (Html.BeginForm())
        {
            <p class="form-horizontal">
                <p class="form-group">
                    @Html.LabelFor(model => model.Title, new { @class = "col-lg-2 control-label" })
                    <p class="col-lg-9">
                        @Html.TextBoxFor(model => model.Title, new { @class = "form-control" })
                    </p>
                </p>
                <p class="form-group">
                    @Html.LabelFor(model => model.Content, new { @class = "col-lg-2 control-label" })
                    <p class="col-lg-9">
                        @Html.TextAreaFor(model => model.Content, new { @class = "form-control", @row = 5 })
                    </p>
                </p>
                <p class="form-group">
                    <p class="col-lg-9"></p>
                    <p class="col-lg-3">
                        <button class="btn btn-success" id="btnSubmit" type="submit">
                            Submit
                        </button>
                    </p>
                </p>
            </p>
        }
    </p>
</p>
<script>
    $('#Content').summernote({
        height: 300,                    // set editor height
        minHeight: null,                // set minimum height of editor
        maxHeight: null,                // set maximum height of editor
        focus: true
    });
</script>

Step 8. Update the Controller with the following code, this will show the content back on the page.

[HttpPost]
public ActionResult BlogEntry(BlogPost aBlogPost)
{
    return View("ShowBlog", aBlogPost);
}

Step 9. Now execute the application, click on the Picture button like the Below Image.

Step 10. Once the Image is uploaded, click on the Code button Below.

It will show the following screen. See the Base64 code highlighted as shown below.

To solve this problem update the JavaScript section of BlogEntry View with the following code.

<script>
    $('#Content').summernote({
        height: 300,                    // set editor height
        minHeight: null,                // set minimum height of editor
        maxHeight: null,                // set maximum height of editor
        focus: true,                    // set focus to editable area after initializing summernote
        callbacks: {
            onImageUpload: function (files) {
                for (let i = 0; i < files.length; i++) {
                    UploadImage(files[i]);
                }
            }
        }
    });

    function UploadImage(file) {
        var url = '@Url.Action("UploadFile", "SummerNoteEx")';

        formData = new FormData();
        formData.append("aUploadedFile", file);
        $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (FileUrl) {
                // alert(FileUrl);
                var imgNode = document.createElement('img');
                imgNode.src = FileUrl;
                $('#Content').summernote('insertNode', imgNode);
            },
            error: function (data) {
                alert(data.responseText);
            }
        });
    }
</script>

In the above code, we are capturing the onImageUpload event of Summernote, reading the uploaded file, saving that file on server by using the UploadFile ActionMethod of controller (Below Code), getting back its server path and updating the path in Summernote to save the image URL instead of base64 data.

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UploadFile(HttpPostedFileBase aUploadedFile)
{
    var vReturnImagePath = string.Empty;
    if (aUploadedFile.ContentLength > 0)
    {
        var vFileName = Path.GetFileNameWithoutExtension(aUploadedFile.FileName);
        var vExtension = Path.GetExtension(aUploadedFile.FileName);

        string sImageName = vFileName + DateTime.Now.ToString("yyyyMMddHHmmss");

        var vImageSavePath = Server.MapPath("/UpImages/") + sImageName + vExtension;
        vReturnImagePath = "/UpImages/" + sImageName + vExtension;
        ViewBag.Msg = vImageSavePath;
        var path = vImageSavePath;

        // Saving Image in Original Mode
        aUploadedFile.SaveAs(path);
        var vImageLength = new FileInfo(path).Length;
        // here to add Image Path to Your Database
        TempData["message"] = string.Format("Image was Added Successfully");
    }
    return Json(Convert.ToString(vReturnImagePath), JsonRequestBehavior.AllowGet);
}

Now, when we execute the application and follow Steps 8 and 9 again to view the code, we will see the Image URL in the code instead of Base64 data like in the following.

This way, I made my blog content smaller to save in the database and also increased the image re-usability. This was how I created a blog entry screen for my blog engine, the code for this blog and all web blogs (which I may write in the future) are consolidated into a single web application code uploaded here at Github.

Thanks for reading and until next time, keep smiling and progressing!