How to create dropdown menu which displays all files in a directory HTML5 Javascript

Question

I'd like to create a dropdown menu and display all the files currently in a directory so when the user clicks on an item in that list of files, it prints to console the name of that file.

Here is what I've come 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 doing this hardcoded is what if there are 10 files instead of 4? Trying to figure 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 guess I just don't know how to make this to dynamic instead of hardcoding the names in the list. I'm kind of a noob to web programming

Edit:

Just for clarity, all I want to do is populate a dropdown list with the names of files in a directory. So when a user goes to click an item in that list, it will print or log (via console.log()) the contents of that file.

See [How to print all the txt files inside a folder using java script](https://stackoverflow.com/questions/37634049/how-to-print-all-the-txt-files-inside-a-folder-using-java-script/), [How to upload and list directories at firefox and chrome/chromium using change and drop events](https://stackoverflow.com/questions/39664662/how-to-upload-and-list-directories-at-firefox-and-chrome-chromium-using-change-a/) — guest271314, Aug 06 '17 at 18:49
`FileReader` does not have an `.open` method. Have you tried approaches at linked Question at previous comment? — guest271314, Aug 06 '17 at 18:57
Thanks @guest271314 I corrected that error. I'm looking at other linked questions now — barthelonafan, Aug 06 '17 at 19:03
`FileReader` `.readAsText()` returns `result` at `load` or `loadend` event of `FileReader` asynchronously. `FileReaderSync` available at `Worker` thread returns results synchronously, though you would need to send the result to main thread using `Worker.postMessage` and use `message` event or use `MessageChannel` — guest271314, Aug 06 '17 at 19:10
_"all I want to do is populate a dropdown list with the names of files in a directory"_ That is not necessarily a trivial task to achieve accurately. Is requirement to also process sub-directories within the selected directory? — guest271314, Aug 06 '17 at 19:12
@guest271314 I'm feeling a lot better hearing that isn't a trival task :) And no there will be no subdirectories, it will be flat — barthelonafan, Aug 06 '17 at 19:14
_"And no there will be no subdirectories, it will be flat"_ That reduces the element of recursively iterating directories and trying to determine which directory a file is actually within. The answers at linked questions should provide solutions to present inquiry; have you tried the HTML and JavaScript at answers at linked questions? — guest271314, Aug 06 '17 at 19:16
@guest271314 I'm still looking at "How to upload and list directories at firefox and chrome/chromium using change and drop events" trying to understand it. I'm new to web stuff. Although seems pretty over kill for what I want to do. — barthelonafan, Aug 06 '17 at 19:22
_"I'm still looking at "How to upload and list directories at firefox and chrome/chromium using change and drop events" trying to understand it. I'm new to web stuff. Although seems pretty over kill for what I want to do."_ And yet still incomplete as to accurately determining and listing which `File` a directory is located in where the directory contains bother files and directories https://stackoverflow.com/questions/45535408#comment78031244_45535408. See post for an approach using `` element with `multiple` attribute set — guest271314, Aug 06 '17 at 19:40
`webkitdirectory` and `allowdirs` attributes should not be necessary if there are not expected to be nested directories within directory where multiple files are selected. If nested directories are expected current Question has an answers at each [How to print all the txt files inside a folder using java script](https://stackoverflow.com/questions/37634049/) and [How to upload and list directories at firefox and chrome/chromium using change and drop events](https://stackoverflow.com/questions/39664662/) — guest271314, Aug 06 '17 at 19:54
@bartheloafan See also [jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?](https://stackoverflow.com/questions/37106121/jquery-file-upload-plugin-is-possible-to-preserve-the-structure-of-uploaded-fol/) — guest271314, Aug 06 '17 at 20:01

score 1 · Answer 1 · answered Aug 06 '17 at 19:38

You can use <input type="file"> element with multiple attribute set, create two arrays containing File object and result of FileReader.readAsText() and File objects iterate FileList object at change event of input type="file" element to set .name at <option> element .textConten, .value to index of uploaded File append to <select> element, set .value of <textarea> element to selected option which corresponds to index of File as text within array

<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>

@bartheloafan Note, we do not need to store the `File` objects — guest271314, Aug 06 '17 at 20:23

How to create dropdown menu which displays all files in a directory HTML5 Javascript

1 Answers1