title: Javascript <input type="file"> has empty file list even when file is selected
body: <p>I'm trying to do a simple file upload in my HTML and Javascript.</p>
  
  <p>The way that I've set it up is by having an <code>&lt;input type="file" id="file-upload-input"/&gt;</code> with a <code>loadFile</code> function subscribed to its <code>onChange</code> event. (I have this <code>input</code> invisible just because it looks bad.)</p>
  
  <p>I then have a <code>&lt;button/&gt;</code> with the function <code>handleBrowseClick</code> subscribed to its <code>onclick</code> event.</p>
  
  <p>Both of the above controls seem to work fine: when I click on my <code>&lt;button/&gt;</code>, <code>handleBrowseClick</code> is called, which clicks my <code>&lt;input type="file"&gt;</code>, causing the file dialog to open. However, an issue occurs once I select a file and press "open" in the dialog (which triggers the <code>&lt;input type="file"&gt;</code>'s <code>onChange</code> event, thus calling my <code>loadFile</code> function).</p>
  
  <p>As you can see in the Javascript, at this point to try to read the file by getting my <code>&lt;input type="file"&gt;</code>, accessing its <code>files</code> property, and trying to get the first element of that array so that I can read from it with the <code>FileReader</code> (which works fine).</p>
  
  <p>However, no matter what file I select, the <code>files</code> array is always empty (and thus my <code>alert</code> prints out <code>"# Files Selected: 0"</code>)! After extensive debugging and narrowing the problem, I discovered that in <code>handleBrowseClick()</code>, if I remove my debugging code that slightly modifies the body of the HTML, then the file upload suddenly works perfectly! (The <code>alert</code> prints out <code>"# Files Selected: 1"</code>.)</p>
  
  <p>So here's my question: why would a line that</p>
  
  <ul>
  <li>only modifies the body of the HTML (but doesn't affect any of the controls)</li>
  <li>is irrelevant to the file upload functions</li>
  </ul>
  
  <p>prevent my file upload from working?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function handleBrowseClick()
  {
      document.getElementById("upload-file-input").click();
      // if I comment out this line, then the file upload works
      document.body.innerHTML += "&lt;br/&gt;Browsing...";
  }
  function loadFile()
  {
      var elem = document.getElementById("upload-file-input");
      var files = elem.files;
      alert("# Files Selected: " + files.length);
      var file = files[0];
      if (!file) return;
      
      var reader = new FileReader();
      reader.onload = function()
      {
   // do stuff with reader.result
   // example:
   document.getElementById("file-content").innerHTML = reader.result;
      };
      reader.readAsText(file);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="course_chart.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;input type="file" accept=".txt" id="upload-file-input" style="display: none" onChange="javascript:loadFile()"/&gt;
      &lt;button onclick="javascript:handleBrowseClick()" id="choose-file-button"&gt;Load File&lt;/button&gt;
      &lt;div id="file-content"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>