turning filenames of a local directory into a JS array

Question

I'm on a local HTML doc and aim to access a folder and scan through the folder adding each file name into a Javascript array

For example, I have a folder called Videos with

VideoA.mp4 VideoB.mp4

How would I then get a Javascript Array with [0] = VideoA.mp4 and [1] = VideoB.mp4 ?

Thanks in advance, please ask any questions If I didn't make myself clear!

Does the folder have other folders inside it, and if it does do you want to include those files too (nested or as a flat list?) or ignore them? — Samathingamajig, Jul 14 '22 at 03:37
no the folder does not have other folder inside, just .mp4 files @Samathingamajig — Alex, Jul 14 '22 at 03:38
As @skara9 mentioned, you need server-side code (such as with ExpressJS + Node) to read files from a directory. Alternatively, you can create a file input button that can take in a directory (https://stackoverflow.com/a/16774922/12101554) — Samathingamajig, Jul 14 '22 at 03:46
is it possible to do this with Node.js on a local HTML document? @Samathingamajig — Alex, Jul 14 '22 at 03:47
Reread my comment. You need a custom server or a file input button — Samathingamajig, Jul 14 '22 at 03:48
regarding the alternative method you mentioned, would I be able to upload all of the files in the folder to the local html document and then get all the file names to add to an array? @Samathingamajig — Alex, Jul 14 '22 at 03:49
You could cache the file names in a json format and wrap that cache inside a javascript file that emits an event when it finishes loading, and import it, and write a separate cache update file that you run manually each time the directory changes that generates the new version of the json file, then have another program generate the javascript file that wraps the json object in the script you include into your html file with any language you want(reccomend node, php, or python). Or you can have the program take a year looping over all possible 6-letter mp4 files and discover them... — Dmytro, Jul 14 '22 at 04:30

Samathingamajig · Accepted Answer · 2022-07-14T04:22:20.223

0

Note that this does automatically recurse down the tree of nested folders, I'm looking into removing that.

Also this might load all files into RAM, or might load the metadata of them, I'm not sure.

const videosInput = document.getElementById("videos-input");

videosInput.addEventListener("change", (e) => {
  const files = videosInput.files;
  const fileNames = [...files].filter((file) => file.type === "video/mp4").map((file) => file.name);
  console.log(fileNames, fileNames.length);
  
  // do whatever with `fileNames`
});

<input type="file" id="videos-input" webkitdirectory directory multiple />

edited Jul 14 '22 at 04:22

answered Jul 14 '22 at 04:14

Samathingamajig

11,839
3
12
34

This is exactly what im looking for thank you, however when I try and run it in my HTML document I get "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')" any idea of a fix? – Alex Jul 14 '22 at 14:57
This is a classic problem people run into, see answers here [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/a/8716680/12101554). TL;DR The element doesn't exist yet when you're selecting for it, so you need to either move the ` – Samathingamajig Jul 14 '22 at 15:08
Perfect, moved the script tag down below the input tag and all works, thank you so much! – Alex Jul 14 '22 at 15:12

turning filenames of a local directory into a JS array

1 Answers1