Summernote - image url instead of base64 MVC

Summernote editor encodes image files into Base64.I wonder if it has a option to turn this encoding option off and use ‘inserting url’ method instead. I’ve been looking for it but no great success yet. For example, instead of storing images like…

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMj...........> it should be <img src="/Upload/apple.jpg">

Create.cshtml

<div class="form-group">

    @Html.LabelFor(model => model.long_Description, htmlAttributes: new { @class = "control-label col-md-4" })
    <div id="summernote"></div>
    <div class="col-md-10">
        @Html.TextAreaFor(model => model.long_Description, new { @id = "long_Description", @style = "display:none;", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.long_Description, "", new { @class = "text-danger" })
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#summernote').summernote(
            {
                tabsize: 2,
                height: 150
            });

        var editor = $('#long_Description').html();

        $('#summernote').html(editor);

        $('#editorbtn').hover(function () {

            var editor = $('.note-editable').html();
            $('#long_Description').html(editor);

        });

    });
</script>

[tomaac]

You have to upload an actual file to a server to point to it. Base64 encoded option just encodes image into text and add to the content you are editing.

I made a quick and primitive plugin, that handles file upload with ajax: https://github.com/tomaac/summernote-ajaxfileupload

[DiemenDesign]

Another option so you don’t have to create your own code, is to check out and use elFinder. https://github.com/semplon/summernote-ext-elfinder And there’s also an example in the elFinder wiki, specifically for Summernote: https://github.com/Studio-42/elFinder/wiki/Integration-with-Multiple-Summernote-(fixed-functions)