title: javascript FileReader get name?
body: <p>I'm working on a simple script for my site to upload images. I have a multiple file input <code>&lt;input type = 'file' name = 'files[]' id = 'hiddenFile' multiple&gt;</code> that is being triggered by a div click. When I queue the files, I want to be able to delete one. I know I can loop through the <code>$('#hiddenFile').val()</code> and splice to get the name out but I'm having an issue with figuring out the file name. When I assign the file to a new img container, how do I get the name? I've tried <code>console.log(f.name)</code> and a few variations but it returns an undefined error. Here are my scripts. I think I'm pretty close but this is something I'm learning as I go. Thanks!</p>
  
  <pre><code>function readURL(input) {
  var files = $('#hiddenFile')[0].files; //where files would be the id of your multi file input
  //or use document.getElementById('files').files;
  
      for (var i = 0, f; f = files[i]; i++) {
  
          var reader = new FileReader();
  
          reader.onload = function (e) {
              console.log(f.name); //how can I get the 
                                   //file name here to add it to the image as an attribute?
              $("&lt;img src = '"+e.target.result+"' class = 'addedImg'&gt;").appendTo("#imgBox");
          };
  
          reader.readAsDataURL(f);
  
      }
  }
  
  $(document).ready(function(){
      $(document).on('click', '#addBtn', function(e){
          e.preventDefault();
          $('#hiddenFile').click();
      });
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/AD06b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AD06b.png" alt="enter image description here"></a></p>