title: MVC Anti-forgery Token won't allow multiple file upload when posting through AJAX
body: <p>I know that uploading multiple files works fine, because, when I comment out 
  <code>[ValidateAntiForgeryToken]</code> I can select multiple files and they will get uploaded without any issue all as intended.</p>
  
  <p>However when I put <code>[ValidateAntiForgeryToken]</code> back <code>If I select 2 or more files</code>, I get server <code>500 status error</code> and none of the files get uploaded. </p>
  
  <p>Additionally I'll add the error:
  <code>Failed to load resource: the server responded with a status of 500 (Internal Server Error)</code> the stack trace says it stopped on <code>line 1 of Upload action</code></p>
  
  <p>However, if I select 1 file, it gets uploaded successfully and I get <code>status code 200</code>.</p>
  
  <p>I'm still fairly new to this - I can't tell what's wrong. I appreciate any help on this enigma. :-)</p>
  
  <p>This is my controller action:</p>
  
  <pre><code>[HttpPost]
  [ValidateAntiForgeryToken]   // If I comment this out, everything works as intended
  public ActionResult Upload()
  {
      for (int i = 0; i &lt; 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
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>@Html.TextBoxFor(model =&gt; model.file, new { type = "file", id = "file-upload", multiple="multiple" })
  @Html.ValidationMessageFor(model =&gt; model.file, "", new { @class = "text-danger" })
  
  &lt;div id="selectedFiles"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I build my custom file Array, so I could have a fancy remove file feature.
  This is my how I call the <code>UploadAjax</code> function:</p>
  
  <pre><code>var storedFiles = [];    //this is what I pass to it.
  
  $("#stupidTest").click(function () {
      UploadAjax(storedFiles);
  });
  </code></pre>
  
  <p>JQuery, AJAX. This is the upload function. </p>
  
  <pre><code>function UploadAjax(storedFilesArray) {
      var formData = new FormData();
  
      for (let i = 0; i &lt; 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) {
              ...
          }
      });
  }
  </code></pre>
  
  <p><code>**Edit: Found that this happened at the same second my multiple file upload request failed**</code></p>
  
  <pre><code>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
  &lt;machineKey&gt; configuration specifies explicit encryption and validation keys.
  AutoGenerate cannot be used in a cluster.
  </code></pre>