title: Problem with async/await with FileReader in JavaScript
body: <p>I'm using FileReader in a Vue.js project, and I have a problem with this code:</p>
  <pre><code>async uploadDocuments(files) {
      for (let file of files) {
          let fileName = file.name;
          let fileContent;
          let reader = new FileReader();
          reader.onload = async () =&gt; {
              fileContent = reader.result;
              await this.submitFile(fileContent, fileName, fileType)
                  .then(/* THEN block */)
                  .catch(/* CATCH block */);
          };
          reader.onerror = (error) =&gt; { console.warn(error); };
          reader.readAsDataURL(file);
      }
      console.log(&quot;COMPLETED&quot;);
  }
  
  async submitFile(fileContent, fileName, fileType) {
      // this function should handle the file upload and currently contains a timeout
      await new Promise((resolve) =&gt; setTimeout(resolve, 3000));
  }
  </code></pre>
  <p>This is the desired execution order (example with two files):</p>
  <ol>
  <li>(wait 3s)</li>
  <li>THEN block (file 1)</li>
  <li>(wait 3s)</li>
  <li>THEN block (file 2)</li>
  <li>COMPLETED</li>
  </ol>
  <p>But this is the actual execution order:</p>
  <ol>
  <li>COMPLETED</li>
  <li>(wait 3s)</li>
  <li>THEN block</li>
  <li>THEN block</li>
  </ol>
  <p>The &quot;THEN block&quot; is correctly executed after the timeout, but the execution of the code in the <code>for</code> loop continues without waiting the execution of the <code>onload</code> function.</p>
  <p>How can I make the reader asynchronous? I tried many solutions (such as wrapping the <code>for</code> loop in a promise and putting the <code>resolve()</code> function inside <code>.then()</code>) but none of them works.</p>