MVC Anti-forgery Token won't allow multiple file upload when posting through AJAX

Question

I know that uploading multiple files works fine, because, when I comment out [ValidateAntiForgeryToken] I can select multiple files and they will get uploaded without any issue all as intended.

However when I put [ValidateAntiForgeryToken] back If I select 2 or more files , I get server 500 status error and none of the files get uploaded.

Additionally I'll add the error: Failed to load resource: the server responded with a status of 500 (Internal Server Error) the stack trace says it stopped on line 1 of Upload action

However, if I select 1 file, it gets uploaded successfully and I get status code 200 .

I'm still fairly new to this - I can't tell what's wrong. I appreciate any help on this enigma. :-)

This is my controller action:

[HttpPost]
[ValidateAntiForgeryToken]   // If I comment this out, everything works as intended
public ActionResult Upload()
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        var file = Request.Files[i];

        var fileName = Path.GetFileName(file.FileName);

        var path = Path.Combine(Server.MapPath("~/Some/FilePath"), fileName);
        file.SaveAs(path);
    }

    return Json(new { success = true, responseText = "Success!" }, JsonRequestBehavior.AllowGet); //This is placeholder, I'll implement validation later
}

The HTML:

@Html.TextBoxFor(model => model.file, new { type = "file", id = "file-upload", multiple="multiple" })
@Html.ValidationMessageFor(model => model.file, "", new { @class = "text-danger" })

<div id="selectedFiles"></div>

I build my custom file Array, so I could have a fancy remove file feature. This is my how I call the UploadAjax function:

var storedFiles = [];    //this is what I pass to it.

$("#stupidTest").click(function () {
    UploadAjax(storedFiles);
});

JQuery, AJAX. This is the upload function.

function UploadAjax(storedFilesArray) {
    var formData = new FormData();

    for (let i = 0; i < storedFilesArray.length; i++) {
        let file = storedFilesArray[i];

        formData.append('__RequestVerificationToken', getToken()); //appends the value to the formData. 
        formData.append("file-upload", file);
    }
    $.ajax({
        type: "POST",
        dataType: 'json',
        cache: false,
        url: '/Home/Upload',
        data: formData,
        contentType: false,
        processData: false,
        success: function (response) {
            ...
        },
        error: function (response) {
            ...
        }
    });
}

**Edit: Found that this happened at the same second my multiple file upload request failed**

System.Web.Mvc.HttpAntiForgeryException: The anti-forgery token could not be
decrypted. If this application is hosted by a Web Farm or cluster, ensure that
all machines are running the same version of ASP.NET Web Pages and that the
<machineKey> configuration specifies explicit encryption and validation keys.
AutoGenerate cannot be used in a cluster.

Answer 1

Take this line out of the loop (and put it above or below the loop):

formData.append('__RequestVerificationToken', getToken()); //appends the value to the formData.

append will keep adding on to the __RequestVerificationToken value that gets submitted to the server. Once it has been appended to once (ie. if you've selected 2 or more files), the value won't be a valid XSRF anti-forgery token. And then it fails to validate and thus you get an error on the server.

Answer 2

Maybe yuo should set formData.append('__RequestVerificationToken', getToken()); outside the cycle?

var formData = new FormData();
formData.append('__RequestVerificationToken', getToken()); //appends the value to the formData. 
for (let i = 0; i < storedFilesArray.length; i++) {
        let file = storedFilesArray[i];
         formData.append("file-upload", file);
    }