JSFiddle - React, Tailwind, and code Playground

by Brian Wendt

HTML

<input id="picker" type="file" webkitdirectory multiple />
<div id="list">
  Pick a directory.
</div>

CSS

#picker {
  margin-bottom: 1em
}

JavaScript

let picker = document.getElementById('picker')

picker.addEventListener('change', (event) => {
  let files = event.target.files
  let list = document.getElementById('list')
  list.innerHTML = 'You selected these files:'

  for (let i = 0; i < files.length; i++) {
    let file = files[i]
    console.log(file);
    list.innerHTML += '<br>' + file.webkitRelativePath
  }
})