title: Send Multiple Files to PHP with Jquery and Fetch
body: <p>I'm building an HTML form using Jquery to send the data to a PHP backend. It is supposed to allow for multiple attachments, which are then sent via <code>fetch</code>. I'm receiving the <code>$_POST</code> fine, but <code>$_FILES</code> only contains the last file selected.</p>
  <p>I know this is because the <code>multiple</code> attribute resets every time a new file picker window is opened, but I it to save each file as it is selected. To address this, I'm trying to capture each file in a JS array, appending the array to <code>FormData</code> before it posts to the server.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(e){
      // Add input files to array
      $('#inputId').on('change', function(e) {
          fileList.push(fileName[0]);
      });
  
      // Form submission
      $("#formId").on('submit', function(e){
          e.preventDefault();
          formData = new FormData(this);
          formData.append(fileList);
          url = '../php/submit.php';
          fetch(url, {method: 'POST', body: formData})
              .then(function(response) {
                  return response.text();
              })
              .then(function(body){
                  console.log(body);
              });
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="formId" enctype="multipart/form-data" method="POST"&gt;
    &lt;div class="ds-row ds-file-upload-container ds-mar-b-2"&gt;
      &lt;div class="ds-col-xs-12 ds-col-md-6"&gt;
        &lt;label for="inputId" class="ds-button"&gt;Choose a file
          &lt;input type="file" class="ds-file-upload" name="upload[]" id="inputId" multiple="multiple"&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As of now, the form is not submitting anything when the <code>submit</code> button is clicked. If I comment out the <code>#inputId</code> onchange event, it works, but of course, it doesn't have all the files included in the <code>FormData</code>.</p>