Загрузка изображений в папку в редакторе Summernote

Question

У меня есть приложение asp.net MVC 4. В этом приложении у меня есть форма, в этой форме у меня есть SummerNote Rich Text Editor. Но в этом редакторе у меня есть возможность загружать изображения в этот редактор.

Но однажды я заполняю остальные поля и подхожу к этой форме. Это не сохранение изображений, которые я загрузил через редактор Summernote.

Я хочу загрузить изображения по следующему пути ~/Content/Images/

и держи путь как ~/Content/Images/Image_Name.JPG в поле базы данных

Поэтому я попытался создать свое решение следующим образом, следуя этому решению, и о проблеме GitHub сообщили здесь

со страницы просмотра

<div class="form-group">
 @Html.TextAreaFor(m => m.Field_Value, new { @class = "form-control summernote"})
</div>

Контроллер метод

    [HttpPost]
    public byte[] UploadImage(HttpPostedFileBase file)
    {
        Stream fileStream = file.InputStream;
        var mStreamer = new MemoryStream();
        mStreamer.SetLength(fileStream.Length);
        fileStream.Read(mStreamer.GetBuffer(), 0, (int)fileStream.Length);
        mStreamer.Seek(0, SeekOrigin.Begin);
        byte[] fileBytes = mStreamer.GetBuffer();
        Stream stream = new MemoryStream(fileBytes);

        //string result = System.Text.Encoding.UTF8.GetString(fileBytes);
        var img = Bitmap.FromStream(stream);
        Directory.CreateDirectory("~//Content//Images//" + img);
        return fileBytes;

    }

это сценарий

<script type="text/javascript">
$('.summernote').summernote({
    height: 200,   // set editable area's height
    focus: true,   // set focus editable area after Initialize summernote
    onImageUpload: function (files, editor, welEditable) {
        var formData = new FormData();
        formData.append("file", files[0]);

        $.ajax({
            url: "@Url.Action("Home", "UploadImage")",
            data: formData,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            success: function (imageUrl) {
                if (!imageUrl) {
                    debugger;
                    // handle error
                    return;
                }
                editor.insertImage($editable, imageUrl);
            },
            error: function () {
                // handle error
            }
        }); 
    }
});

в этот раз также не показывается, загружено ли изображение в редактор вообще

Answer 1

Я обновил ваш скрипт, и он работает для меня (проверьте изменения в комментариях к коду):

<script type="text/javascript">
var editor =  // 1st change: will need this variable later
$('.summernote').summernote({
    height: 200,   
    focus: true,   
    callbacks: { // 2nd change - onImageUpload inside of "callbacks"
      onImageUpload: function (files) { // 3rd change - dont need other params
        var formData = new FormData();
        formData.append("file", files[0]);

        $.ajax({
            url: "@Url.Action("Home", "UploadImage")",
            data: formData,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            success: function (imageUrl) {
                if (!imageUrl) {
                    // handle error
                    return;
                }
                // 4th change - create img element and add to document
                var imgNode = document.createElement('img');
                imgNode.src = imageUrl;
                editor.summernote('insertNode', imgNode);
            },
            error: function () {
                // handle error
            }
        });
      } 
    }
});
</script>