title: Can't access file name in File Reader Javascript
body: <p>I am making an in browser image previewer. The image previews load fine, but the filename on this line repeats the first filename:</p>
  
  <pre><code>&lt;div.innerHTML = "&lt;img class='thumbnail' src='" + picfile.result + "'" +
  "title='" + file.name + "'/&gt;
  </code></pre>
  
  <p>I tried </p>
  
  <pre><code>picfile.name 
  file.name 
  file[i].name 
  files.name 
  files[i].name 
  </code></pre>
  
  <p>and none worked. Either it outputs undefined or breaks the whole script.</p>
  
  <p>Here's the full code of the file reader.</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() {
    if (window.File &amp;&amp; window.FileList &amp;&amp; window.FileReader) {
      var filesInput = document.getElementById("uploadimage ");
      filesInput.addEventListener("change ", function(event) {
        var files = event.target.files;
        var output = document.getElementById("result ");
        for (var i = 0; i &lt; files.length; i++) {
          var file = files[i];
          if (!file.type.match('image'))
            continue;
          var picreader = new FileReader();
          picreader.addEventListener("load ", function(event) {
            var picfile = event.target;
            var div = document.createElement("div ");
            div.innerHTML = "&lt;img class='thumbnail' src='" + picfile.result + "' " +
              "title='" + file.name + "' /&gt;&lt;br&gt;";
            //div.innerHTML += picfile.name + '&lt;br&gt;&lt;span style="color:red"&gt;' + picfile.name.toLowerCase().replace(/[^\w\d\.]/gi, '') + '&lt;/span&gt;';
            //filename output.insertBefore(div, null);
          });
          picreader.readAsDataURL(file);
        }
      });
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="file" multiple id="uploadimage" class="file_input "&gt;
  &lt;div id="result" class="uploadPreview "&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>