title: How to implement Progress Bar and Callbacks with async nature of the FileReader
body: <p>I have the FileReader API called within a for loop to iterate through multiple file objects. I'm using FileReader to essentially display preview of images.</p>
  
  <pre><code>function() {
      for (var i in Files) {
          var fileReader = new FileReader();
          fileReader.readAsBinaryString(Files[i]);
          fileReader.onload = function() {
  
              // do something on FileReader onload
  
          }
  
          fileReader.onprogress = function(data) {
              if (data.lengthComputable) {                                            
                  var progress = parseInt( ((data.loaded / data.total) * 100), 10 );
                  console.log(progress);
              }
          }
      }
  
      // do something on completion of FileReader process
      // actions here run before completion of FileReader
  }
  </code></pre>
  
  <p>I'm bumping into two issues due to the async nature of the FileReader API. First, the <code>onprogress</code> event fires for each FileReader instance. This gives me progress for each file. Whereas, I intend to display the total progress for all files instead of individual files.</p>
  
  <p>Secondly, I want to perform actions that should only be performed when all instances (one for each file) of the FileReader have completed. Currently, since FileReader is functioning asynchronously, the actions run before FileReader completes it's task. I have searched a lot and yet to come across a solution for these problems. Any help is appreciated.</p>