File inputs' directory and multiple upload

How they're sort of the same...

by Johntaa

HTML

<p style="height:0px;overflow:hidden" >
  <input id="fc" type="checkbox" checked="checked" title="Check to upload directories" /> 
  <input id="f" type="file" multiple="multiple" webkitdirectory="" directory=""  /></p>
  <ul id="fs"></ul>
  
 <button type="button" onclick="chooseFile();">choose file</button>
    <script> 
  function chooseFile() {
      document.getElementById("f").click();
   }
</script>

CSS

button{ 
background:#4679BD;
color:#ffffff;    
}

JavaScript

var el = document.getElementById('f'),
    el2 = document.getElementById('fs'),
    el3 = document.getElementById('fc');

fc.addEventListener('change', function (e) {
    el.webkitdirectory = this.checked;
});

function openFile(e) {
    !this.hreffed && (this.href = webkitURL.createObjectURL(this.file));
    this.hreffed = true;
}

el.addEventListener('change', function (e) {
    e.preventDefault();

    var files = [].slice.call(this.files);
    files.forEach(function (file) {
        var li = document.createElement('li'),
            a = document.createElement('a');
        a.file = file;
        a.href = '#';
        a.target = '_blank';
        a.textContent = file.name;
        a.addEventListener('click', openFile);
        li.appendChild(a);
        el2.appendChild(li);
    });
});