title: Why is the list of selected files always empty if I obtain the file list before onchange?
body: <p>I want to show names of files after I choose them. So, why is the files list empty in the <code>onchange</code> handler?</p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function () {
      let list = document.getElementById("demo");
      let files = document.getElementById("addFileId").files;
  
      document.getElementById("addFileId").onchange = function () {
          console.log(files);
          console.log(files[0]);
  
          for (let i = 0; i &lt; files.length; i++) {
              let li = document.createElement('li');
              li.innerText = files[i].name;
              list.appendChild(li);
          }
      };
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="file" multiple class="form-control"
      name="file" id="addFileId" required&gt;
  
  &lt;ul id="demo"&gt;&lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>