title: Get file names for the file upload element
body: <p>Trying to display the file names from a file input element. I am able to console log when I am inside the onchange function but not the addeventlistener. In the code below the console.log('Inside change eventlistener'); will not execute. I can I both log being inside the event listener and get the file names in order to display them? <a href="https://codepen.io/centem/pen/d1ae210287e96577676a1e2fd4aac503" rel="nofollow noreferrer">Here</a> is the codepen of the code. Thank you.</p>
  <p>html:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;label&gt;Attachments&lt;/label&gt;
  &lt;div&gt;
      &lt;input type=&quot;file&quot; class=&quot;form-control input-lg&quot; name=&quot;attachments&quot; id=&quot;attachments&quot; multiple onchange=&quot;getFileData()&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>js:</p>
  <pre><code>function getFileData() {
    console.log('Inside getFileData()...')
    var elem = document.getElementById('attachments');
    console.log(elem);
    elem.addEventListener('change', function(e) {
      console.log('Inside change eventlistener');
      console.log(e.target);
      var fileName = e.target.files[0].name;
      console.log(fileName);
    });
  };
  </code></pre>
  <p>UPDATE:
  I am able to console the file names but still not able to display the names to the user. How do I show the names of the files within on the html page. elem.value = ... does not work.</p>
  <p>Updated JS:</p>
  <pre><code>function getFileData() {
    console.log('Inside getFileData()...')
    var elem = document.getElementById('attachments');
    var files = document.getElementById('attachments').files;
    var names = '';
    for (let i = 0; i &lt; files.length; i++) {
      console.log(files[i].name);
      names += files[i].name;
    }
    console.log(names);
    console.log(Object.keys(elem));
    //elem.setAttribute('value', names);
  
  };
  </code></pre>