<form action="https://postman-echo.com/post" method="post" enctype="multipart/form-data" id="form">
<input type="file" name="attachments" id="attachments" multiple>
<input type="submit">
  
</form>
var storedFiles = [];

document.addEventListener("DOMContentLoaded", init, false);
function init() {
  document.querySelector('#attachments').addEventListener('change', handleFileSelect, false);
  document.querySelector('#form').addEventListener('submit', handleSubmit, false);
}

function handleFileSelect(e) {
  console.log('called handleFileSelect');
  var files = e.target.files;
  var filesArr = Array.prototype.slice.call(files);
  filesArr.forEach(function(f) {          
    console.log('storing '+JSON.stringify(f));
    storedFiles.push(f);
  });
}

function handleSubmit(e) {
  e.preventDefault();
  console.log('do form submit', storedFiles.length);

  var formData = new FormData();
  for(var x=0;x<storedFiles.length;x++) {
    formData.append('file'+x, storedFiles[x]);    
    console.log('adding a file to the form data '+x);
  }

  fetch('https://postman-echo.com/post', {
    method:'POST',
    body:formData   
  }).then(function(res) {
    console.log('Status', res);
  }).catch(function(e) {
    console.log('Error',JSON.stringify(e));
  });

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.