Dropzone JS не является ошибкой функции при частичном просмотре - PullRequest
Новая
       7

Dropzone JS не является ошибкой функции при частичном просмотре

3 голосов
/ 31 мая 2019

Я использую jquery-modal от kyle fox и сталкиваюсь с этой проблемой. Когда я открываю модальное окно, мой частичный вид загружается в модальное. Тем не менее, я получаю эту ошибку в консоли:

Dropzone.options.dropzone не является функцией

Если я изменю Dropzone.options.dropzone на $ (# dropzone) .dropzone, код работает. Однако, когда я отправляю, он не загружает файлы на сервер, а просто перенаправляет меня на домашнюю страницу.

Я уже загрузил dropzone js и css в шапку, но я не могу заставить это работать. 

@model AppOne.Data.ViewModels.AnnouncementAttachmentDetailsViewModel
<script>
    Dropzone.options.dropzone({
        url: "@Url.Action("Save", "AnnouncementAttachments", new { area = "Messages" })",
        autoProcessQueue: false,
        addRemoveLinks: true,
        maxFiles: 1,
        uploadMultiple: true,
        parallelUploads: 100,
        init: function () {
                console.log("active");
                var submitButton = document.querySelector("#submit");
                var token = $('input[name="__RequestVerificationToken"]').val();
                var wrapperThis = this;
                submitButton.addEventListener("click", function (e) {
                    console.log("submitted");
                    wrapperThis.processQueue();
                    e.preventDefault();
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    return false;
                });

                this.on('sendingmultiple', function (data, xhr, formData) {
                    formData.append("__RequestVerificationToken", token);
                    formData.append("@Html.IdFor(x=>x.AttachmentId)",$("#@Html.IdFor(x => x.AttachmentId)").val())
                });;

                this.on('errormultiple', function (file, message) {
                    //toastr.error(message);
                    wrapperThis.disable();
                });

                this.on('successmultiple', function (file,message) {
                    $.each(message, function (key, value) {
                        //toastr.success(value);
                    });
                    $(".dz-remove").hide();
                    wrapperThis.disable();
                });
            }
    });
</script>
<div class="row row-extend">
    <div class="col-sm-12">
        <h2>Upload</h2>
    </div>
    <div class="col-sm-12">
        <hr />
    </div>
</div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { @action = "/", enctype = "multipart/form-data", id = "modal" }))
{
    @Html.AntiForgeryToken()
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    @Html.HiddenFor(x => x.AttachmentId)
                    <div id="dropzone" name="Files" class="dropzone form-group"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="clearfix">
                        <div class="pull-right">
                            <button type="submit" id="submit" class="btn btn-primary">Upload</button>
                            @Html.ActionLink("Cancel", "Index", @ViewContext.RouteData.Values["controller"].ToString(), new { }, new { @class = "btn btn-outline-secondary" })
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

EDIT:

Мой layout.cshtml: 

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - AppOne</title>

    <link rel="stylesheet" href="~/twitter-bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/theme/theme-extended.css" />
    <link rel="stylesheet" href="~/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="~/jqueryui/jquery-ui.css" />
    <link rel="stylesheet" href="~/toastr.js/toastr.css" />
    <link rel="stylesheet" href="~/jquery-modal/jquery.modal.css" />
    <link rel="stylesheet" href="~/select2/css/select2.min.css" />
    <link rel="stylesheet" href="~/css/Modal.css" />
    <link rel="stylesheet" href="~/css/Site.css" />

    <link rel="stylesheet" href="~/datatables/css/jquery.dataTables.css" />
    <link rel="stylesheet" href="~/datatables/css/select.dataTables.css" />
    <link rel="stylesheet" href="~/datatables/css/fixedHeader.dataTables.css" />
    <link rel="stylesheet" href="~/datatables/css/responsive.bootstrap.css" />
    <link rel="stylesheet" href="~/css/DataTablesExtended.css" />
    <link rel="stylesheet" href="~/bootstrap-datetimepicker/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="~/dropzone/dropzone.css" />

    <script src="~/jquery/jquery.min.js"></script>
    <script src="~/jquery-validate/jquery.validate.js"></script>
    <script src="~/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/jqueryui/jquery-ui.js"></script>
    <script src="~/twitter-bootstrap/js/bootstrap.js"></script>
    <script src="~/moment.js/moment.min.js"></script>
    <script src="~/select2/js/select2.min.js"></script>
    <script src="~/toastr.js/toastr.min.js"></script>
    <script src="~/jquery-modal/jquery.modal.min.js"></script>
    <script src="~/datatables/js/jquery.dataTables.js"></script>
    <script src="~/datatables/js/dataTables.select.js"></script>
    <script src="~/datatables/js/dataTables.fixedHeader.js"></script>
    <script src="~/datatables/js/dataTables.responsive.js"></script>
    <script src="~/datatables/js/responsive.bootstrap.js"></script>
    <script src="~/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="~/dropzone/dropzone.js"></script>
    @RenderSection("scripts", false)
    @RenderSection("styles", false)
</head>

1 Ответ

0 голосов
/ 03 июня 2019

Однако, когда я отправляю, он не загружает файлы на сервер, а просто перенаправляет меня на домашнюю страницу.

Кажется, что ваша кнопка «Загрузить» находится в форме, а URL-адрес формы конфликтует с URL-адресом Dropzone.js (URL-адрес должен быть указан для элементов, отличных от формы (или если у формы нет атрибута действия). ). Попробуйтесделайте модификацию, как в рабочем примере:

Html.BeginForm, удалите действие 

@using (Html.BeginForm( FormMethod.Post, new { enctype = "multipart/form-data",  id = "modal" }))
{ 
  // the stuff you want
}

Dropzone.js, ПРИМЕЧАНИЕ : если для параметра uploadMultiple установлено значение true, тогда Dropzone добавит [] к paramName.Посмотрев на запрос о загрузке нескольких файлов html5, я заметил, что запрос не добавляет индексы к имени файла (files [n]).Dropzone.js делает это, так что есть обходной путь.Если вы добавите параметр paramName в конфигурацию Dropzone JS и вызовете метод, который возвращает файлы, вы получите то же поведение, что и для загрузки нескольких файлов html5.Вы также можете обратиться к этой ссылке для получения дополнительной информации о параметрах конфигурации Dropzone.js 

@section Scripts
{
<script>
     function myParamName() {
          return "Files";
     }

    $("#dropzone").dropzone({
        url: "@Url.Action("Save", "Home")",
        autoProcessQueue: false,
        paramName: myParamName,
        addRemoveLinks: true,
        maxFiles: 1,
        uploadMultiple: true,
        parallelUploads: 100,
        init: function () {
            console.log("active");
            var submitButton = document.querySelector("#submit");
            var token = $('input[name="__RequestVerificationToken"]').val();
            var wrapperThis = this;
            submitButton.addEventListener("click", function (e) {
                console.log("submitted");
                wrapperThis.processQueue();
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                return false;
            });

            this.on('sendingmultiple', function (data, xhr, formData) {
                formData.append("__RequestVerificationToken", token);
                formData.append("@Html.IdFor(x=>x.AttachmentId)",$("#@Html.IdFor(x => x.AttachmentId)").val());
            });;

        }
    });
</script>
}

Контроллер 

public IActionResult Save(List<IFormFile> Files,int AttachmentId)
{ 
//....
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...