title: Wait until all files are read asynchronously (FileReader) and then run code
body: <p>I have a page where the user can select a folder to upload files. Before sending the files, I need to read them and check the data. My code is organized as follows:</p>
  
  <pre><code>$( '#folder-select' ).on('change', getValidFileList);
  var fileList = [];
  
  var getValidFileList = function(event) {
  
      //Get the selected files
      files  = $( this ).get(0).files;
  
      for(var i=0; i&lt;files.length; i++) {
          checkFile(files[i]);
      }
      //Do something with the final fileList
      console.log(fileList);
  };
  
  var checkFile = function(file) {
      var reader = new FileReader();
      reader.onload = function (event) {
          //Here I parse and check the data and if valid append it to fileList
      };
      reader.readAsArrayBuffer(file);
  
  };
  </code></pre>
  
  <p>I would like to take the resulting fileList array to keep processing/displaying the uploaded files. I found that reader.onload() is called asynchronously, so the result of the <code>console.log(fileList)</code> after the <code>for</code> loop is an empty array (it is executed before the <code>reader.onload()</code> is fired). Is there any way to wait until all files are read and appended to fileList?</p>