Server responded with 400 code when trying to upload file with DropZone JS

Question

I'm trying to upload files using Dropzone JS but I got the error message:

Server responded with 400 code"

I tried setting @Html.AntiForgeryToken() in the form. I also tried sending a token:

xhr.setRequestHeader("XSRF-$('input:hidden[name="__RequestVerificationToken"]').val());

but still got the same error.

My HTML:

<form enctype="multipart/form-data" method="POST">
    @Html.AntiForgeryToken()
    <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>

My JS:

Dropzone.options.myDropzone = {
    url: "/Admin/Product/UploadFiles",
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    //acceptedFiles: "image/*",

    init: function () {

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

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

        this.on("addedfile", function (file) {

            var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");

            removeButton.addEventListener("click", function (e) {
                // Make sure the button click doesn't submit the form:
                e.preventDefault();
                e.stopPropagation();
                wrapperThis.removeFile(file);
            });

            file.previewElement.appendChild(removeButton);
        });

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

My action:

[HttpPost]
public ActionResult UploadFiles()
{
    var postedUsername = Request.Form["Username"].ToString();

    // process files

    return Json(new { status = true, Message = "Account created." });
}

Answer 1

I found the solution myself, in sendingmultiple event the code should be

formData.append("__RequestVerificationToken",
                $('input:hidden[name="__RequestVerificationToken"]').val());