How to create a drop-down menu that displays all the files in the HTML5 Javascript directory

Question

I would like to create a drop-down menu and display all the files that are currently in the directory, so when a user clicks on an item in this list of files, he prints the name of the file for the console.

Here is what I came up with so far:

HTML

<form method="post">
        <select name="DropdownList">
                <option value="file1">fileArray[0]</option>
                <option value="file2">fileArray[1]</option>
                <option value="file3">fileArray[2]</option>
                <option value="file4">fileArray[3]</option>
        </select>
</form>

The problem with this hardcoded is that if 10 files instead of 4? Trying to understand a more dynamic approach.

Javascript

document.getElementByName('DropdownList').addEventListener('click', function() {
    window.update.forEach(function(d, 'data/baselinedata') {
        var f = readStringFromFileAtPath(d);
        console.log(f)
    });
});

function readStringFromFileAtPath (pathOfFileToReadFrom) {
        var request = new XMLHttpRequest();
        request.open("GET", pathOfFileToReadFrom, false);
        request.send(null);
        var returnValue = request.responseText;
        return returnValue;
}

I think I just don’t know how to make it dynamic, and not hard code the names in the list. I'm kind of noob for web programming

Edit:

, , . , , ( console.log()) .

Answer 1

<input type="file"> multiple, , File, result FileReader.readAsText() File FileList change input type="file", .name <option> .textConten, .value File <select>, .value <textarea> option, File

<input type="file" multiple><br>
<select></select><br>
<textarea></textarea>
<script>
  const [input, select, textarea, reader] = [
    document.querySelector("input[type=file]")
    , document.querySelector("select")
    , document.querySelector("textarea")
    , new FileReader
  ];
  let [files, data, fn] = [
    [],
    [], (file, reader) => new Promise((resolve, reject) => {
      reader.onload = () => {
        reader.onload = reader.onerror = null;
        resolve(reader.result);
      }
      reader.onerror = reject;
      reader.readAsText(file);
    })
  ];
  input.onchange = async() => {
    select.innerHTML = "";
    files.length = data.length = 0;
    for (const file of input.files) {
      const {
        name
      } = file;
      const option = new Option(name, files.length);
      files.push(file);
      select.appendChild(option);
      let result = await fn(file, reader);
      data.push(result);
    }
  }

  select.onchange = () => {
    textarea.value = data[select.value];
  }
</script>

Hide result