title: Posting form with input fields and multiple files selected using jQuery AJAX in ASP.NET Core
body: <p>I am attempting to manually POST a form in ASP.NET Core using jQuery AJAX as soon as the user finishes selecting multiple files. The Uploader I am using has an "selected" event where I would like to POST the form to the server using jQueryAJAX.</p>
  
  <p>This exact same form posts perfectly to the server when adding a submit button to the form and clicking it on the UI. The Files are bound and the ProductId is bound. However, I am trying to avoid the page flicker. As an alternative solution I am submitting the form by calling: $("#form").submit(); in the onSelect function rather than the AJAX request.</p>
  
  <p>Model looks like the following:</p>
  
  <pre><code>public int ProductId { get; set; }
  public IList&lt;IFormFile&gt; Files { get; set; }
  </code></pre>
  
  <p>Form looks like the following:  </p>
  
  <pre><code>&lt;form method="post" enctype="multipart/form-data"&gt;
       &lt;ejs-uploader id="Files" showFileList="false" autoUpload="false" multiple="true" selected="onSelected" success="onSuccess" allowedExtensions=".doc, .docx, .pdf, .jpg, .jpeg, .png"&gt;&lt;/ejs-uploader&gt;
       &lt;input asp-for="ProductId" type="hidden" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is the JavaScript that I have been trying which is not working:</p>
  
  <pre><code>    function onSelected(args) {
          var files = args.filesData;
          var formData = new FormData();
  
          for (var i = 0; i != files.length; i++) {
              formData.append("files[]", files[i]);
          }
  
          $.ajax({
              type: "POST",
              contentType: false,
              url: '?handler=FileUpload',
              data: formData,
              processData: false,
              headers: {
                  RequestVerificationToken:
                      $('input:hidden[name="__RequestVerificationToken"]').val()
              },
              success: function (data) {
  
              },
          });
  
          //$("#form").submit();
      }
  </code></pre>
  
  <p>I am using razer pages so the action method is:</p>
  
  <pre><code>[BindProperty]
  public int MessageId { get; set; }
  
  [BindProperty]
  public IList&lt;IFormFile&gt; Files { get; set; }
  
  public async Task&lt;ActionResult&gt; OnPostAsync()
  {
  }
  </code></pre>
  
  <p>I have also tried creating a view model: FileUploadViewModel with the same 2 properties in it.</p>
  
  <pre><code>public async Task&lt;ActionResult&gt; OnPostAsync(FileUploadViewModel vm)
  {
  }
  </code></pre>