Dropzone on razor Page returns 400 status code

问题

I am using DropZone on a RAZOR page in ASP.NET core 2.0 with other form inputs like this -

DzDemo.cshtml Page -

<form method="post" enctype="multipart/form-data">
    <input type="text" id="Username" name="Username" />
    <div class="dropzone" id="my-dropzone" name="mainFileUploader">
        <div class="fallback">
            <input name="file" type="file" multiple />
        </div>
    </div>
</form>
<div>
    <button type="submit" id="submit-all"> upload </button>
</div>

JS:-

Dropzone.options.myDropzone = {
            url: "/DzDemo?handler=Upload",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            acceptedFiles: "image/*",
           // paramName: myParamName,
            init: function () {

                var submitButton = document.querySelector("#submit-all");
                var wrapperThis = this;

                submitButton.addEventListener("click", function () {
                    wrapperThis.processQueue();
                });

                this.on('sendingmultiple', function (data, xhr, formData) {
                    formData.append("UserName", $("#Username").val());
                });
                this.on('error',
                    function (file, response) {
                        console.log(response);
                        alert(response);
                    });
            }
        };

DzDemo.cshtml.cs Page:-

[HttpPost]
        public IActionResult OnPostUpload()
        {
            var data = Request.Form; //This is 
            return Page();
        }

but I get 400 response from server and I am not able to process uploaded file server side Also it wont hot the Upload method on server side. Please help

回答1:

One thing that will result in 400 using dropzone.js together with Razor Pages is if the AntiforgeryToken is missing from the form.

This is normally injected automatically but removing _viewimports or its taghelpers will prevent this.

To verify just add this line inside the <form/> element or look at the debug console for error messages.

@Html.AntiForgeryToken()

回答2:

Add this line in sendingmultiple, it will resolve your pb:

this.on('sendingmultiple', function (data, xhr, formData) {
    xhr.setRequestHeader("XSRF-TOKEN",
                     $('input:hidden[name="__RequestVerificationToken"]').val());
});

来源：https://stackoverflow.com/questions/50122555/dropzone-on-razor-page-returns-400-status-code

标签

asp.net-mvc

asp.net-core

dropzone.js

razor-pages