title: Multiple file reading with FileReader and readAsArrayBuffer
body: <p>I'm trying to read and add multiple files to an array. I've already found out that readAsArrayBuffer is a asynchronous function, so i need to wait for previous uploads to end. I tried to use callbacks but i failed.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form enctype="multipart/form-data"&gt;
    &lt;input id="file-input" type="file" multiple="" accept="image/*"&gt;
  &lt;/form&gt;
  &lt;div id="upload-list"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here's js file:</p>
  
  <pre class="lang-js prettyprint-override"><code>var fileList = [];
  $(document).ready(function() {
    function addFiles(files) {
      for (var i = 0; i &lt; files.length; i++) {
        var file = files[i];
        var reader = new FileReader();
        reader.onloadend = (function(file) {
          return function() {
            fileList.push(reader.result);
            $('#upload-list').append('&lt;div class="upload-list-item"&gt;' + file.name '&lt;/div&gt;');
          }
        })(file);
        reader.readAsArrayBuffer(file);
        console.log(fileList);
      }
    }
    $('#file-input').on('change', function(e) {
      addFiles(e.target.files);
    });
  }
  </code></pre>
  
  <p>So now i have new FileReader each iteration, i got rid from <code>Failed to execute 'readAsArrayBuffer' on 'FileReader': The object is already busy reading Blobs</code> error, now i have the same files in my array, although I selected different.</p>
  
  <p><a href="https://i.stack.imgur.com/loC3H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/loC3H.png" alt="google chrome dev"></a></p>