Hi,

I have a list of variables in javascript I want to automatically populate with the file list of a given directory. This is the file list:

hello.mp3
gasp.mp3
scream.mp3
...

and the variables would look like this:

var sounds = {
  "hello" : {
    url : "sound/hello.mp3"
  },
  "gasp" : {
    url : "sound/gasp.mp3",
  },
  "scream" : {
    url : "sound/scream.mp3",
  }
};

the problem is that I CANT use PHP because my server doesnt support it and I cant change that. This on the client side so I guess that doing it with javascript is also out of the question. What alternatives do I have to achieve this?

Hi,

I have a list of variables in javascript I want to automatically populate with the file list of a given directory. This is the file list:

hello.mp3
gasp.mp3
scream.mp3
...

and the variables would look like this:

var sounds = {
  "hello" : {
    url : "sound/hello.mp3"
  },
  "gasp" : {
    url : "sound/gasp.mp3",
  },
  "scream" : {
    url : "sound/scream.mp3",
  }
};

the problem is that I CANT use PHP because my server doesnt support it and I cant change that. This on the client side so I guess that doing it with javascript is also out of the question. What alternatives do I have to achieve this?

• javascript
• variables
• directory-structure

• 2 JavaScript can not read directories on the clientside. – epascarello Commented Apr 4, 2018 at 17:26
• You cannot access the file system from the client side. Is there anything else you can use server-side? – Skwal Commented Apr 4, 2018 at 17:26
• That's not possible. You'll have to run a script server-side. That could be PHP, or any other server language. – JJWesterkamp Commented Apr 4, 2018 at 17:26
• Yeah there is no way, even if the folder is in your server. – Phiter Commented Apr 4, 2018 at 17:26
• The only way to get the file list, is to make the user click a button. And select the files. – deEr. Commented Apr 4, 2018 at 17:27

1 Answer 1

Update: This doesn't get beyond the OP's constrained environment (nothing does actually). But I'm leaving this here because it seems a lot of people don't realize this can be done (with Chrome).

In spite of the ments, you actually CAN read a directory on the client side with the right browser. But, it requires user action.

Not perfect, but does address your constraints.

In order to get the directly list, the user must open a file open dialog and choose the directory. At that point you can iterate the list of files on the client and automatically populate your data structure as you wish.

You must use Chrome and the input must be set up like this:

<input type="file" webkitdirectory="" directory="">

Sample here (remember, this only works in Chrome):

https://codepen.io/anon/pen/PRdbYq