0

Форма для добавления модели, в которой textarea привязана к JS плагину TinyMCE, а заливалка для картинок используется Dropzone.

Проблема в том, если в форме в class указан "dropzone" - то кнопка submit не работает пока в dropzone нет ни одной добавленной картинки, соотв. не могу отправить форму без картинок, а если добавить картинку и форму отправить, то поле Description (которое редактируется с помощью TinyMCE) приходит пустым.

Но если из формы в class="form-horizontal dropzone" убрать "dropzone", то данные из Description в контроллер доходят нормально вместе с остальными данными модели, кнопка срабатывает как должна, но не работает dropzone.

@model NewRoomViewModel
<form id="myDropzone" asp-action="AddRoom" class="form-horizontal dropzone" method="post" enctype="multipart/form-data"> 
<div asp-validation-summary="All" class="text-danger"></div> 
<div class="form-group"> 
<label asp-for="Name" class="col-md-2 control-label"></label> 
<div class="col-md-10"> 
<input asp-for="Name" type="text"/> 
<span asp-validation-for="Name" class="text-danger"></span> 
</div> 
</div> 
<div class="form-group"> 
<label asp-for="Price" class="col-md-2 control-label"></label> 
<div class="col-md-10"> 
<input asp-for="Price" type="number"/> 
<span asp-validation-for="Price" class="text-danger"></span> 
</div> 
</div> 
<div class="form-group"> 
<label asp-for="MaxPersons" class="col-md-2 control-label"></label> 
<div class="col-md-10"> 
<input asp-for="MaxPersons" type="number"/> 
<span asp-validation-for="MaxPersons" class="text-danger"></span> 
</div> 
</div> 
<div class="form-group"> 
<label asp-for="Description" class="col-md-2 control-label"></label> 
<div class="col-md-10"> 
<textarea asp-for="Description" type="text" rows="10" cols="45"></textarea> 
<span asp-validation-for="Description" class="text-danger"></span> 
</div> 
</div> 
<div class="form-group"> 
<div class="dropzone-previews"></div> 
</div> 
<div class="form-group"> 
<button type="submit">Добавить</button> 
</div> 
</form> 


@section Scripts { 
<script> 
Dropzone.options.myDropzone = { 
autoProcessQueue: false, 
uploadMultiple: true, 
parallelUploads: 100, 
maxFiles: 100, 
init: function() { 
var myDropzone = this; 

this.element.querySelector("button[type=submit]").addEventListener("click", 
function(e) { 
e.preventDefault(); 
e.stopPropagation(); 
myDropzone.processQueue(); 
}); 
} 
} 
</script> 
@{ 
await Html.RenderPartialAsync("_ValidationScriptsPartial"); 
await Html.RenderPartialAsync("_TinyMCE"); 
} 
}

1 ответ 1

0

Для отправки формы без прикрепленных изображений проверяем

myDropzone.getQueuedFiles().length

Если меньше 0, то отправляем форму обычным способом

$("#myDropzone").submit();

Для корректной передачи данных из TinyMCE на обработчик события "sending" вызываемого dropzone перед отправкой изображений вешаем функцию принудительного обновления данных из редактора

tinymce.activeEditor.execCommand('mceInsertContent', false);

Итого получилось:

<script>
    Dropzone.options.myDropzone = {
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 100,
        init: function() {
            var myDropzone = this;

            this.element.querySelector("button[type=submit]").addEventListener("click",
                function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                        if (myDropzone.getQueuedFiles().length > 0) {                        
                            myDropzone.processQueue();  
                        } else {                       
                            $("#myDropzone").submit();
                        }
                });
            this.on("sending", function () {
                tinymce.activeEditor.execCommand('mceInsertContent', false);
            });
        }
    }
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.