Getting a file list from a directory on client side

Question

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?

You cannot access the file system from the client side. Is there anything else you can use server-side? — Skwal, Apr 04 '18 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, Apr 04 '18 at 17:26
The only way to get the file list, is to make the user click a button. And select the files. — deEr., Apr 04 '18 at 17:27
What about externally? A php page on another server that creates the list and then get it from there? — Cain Nuke, Apr 04 '18 at 17:30
Other servers do not have access to other server's filesystems. What is your server and what does it support? php is not the only server side language — Patrick Evans, Apr 04 '18 at 17:36
Its a chat server. It supports java, javascript and html as far as I know. — Cain Nuke, Apr 04 '18 at 17:37
For all those claiming no way to read directories, I challenge you to expand your thinking and reviewing my answer below. Although this does not overcome the OP's constraints, I hope you find it instructive. — Randy Casburn, Apr 04 '18 at 18:02

Randy Casburn · Answer 1 · 2018-04-04T23:06:48.120

7

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

edited Apr 04 '18 at 23:06

answered Apr 04 '18 at 17:51

Randy Casburn

13,840
1
16
31

Thanks for the help but I need it to do it automatically and on all major browsers. – Cain Nuke Apr 04 '18 at 17:54
With those constraints there is no client side solution unless you move to a platform specific app. Perhaps built with ElectronJS. – Randy Casburn Apr 04 '18 at 18:01
When I go to the directory on my browser like this example.org/sounds/ I can see the list of files. Cant I have javascript read those? – Cain Nuke Apr 04 '18 at 18:03
The requirement stated in your question is to get the list of files. But, yes, you will be able to read all files in that folder – Randy Casburn Apr 04 '18 at 18:07
I mean, to have javascript get the list from there. – Cain Nuke Apr 04 '18 at 18:13
Yes, here is an updated pen. Choose a directory and look at the console: https://codepen.io/anon/pen/PRdbYq?editors=1111 – Randy Casburn Apr 04 '18 at 18:19
@RandyCasburn op is wanting to get a server's directory listing not a directory from the users own computer hence their asking about getting a listing at url _"example.org/sounds/"_ – Patrick Evans Apr 04 '18 at 22:58
@PatrickEvans - and I quote: _This on the client side_ from the OPs question. How do you get to the server side conclusion? – Randy Casburn Apr 04 '18 at 23:00
@PatrickEvans - You mean the second comment above. Yeah, I think the OP has not been clear on this. – Randy Casburn Apr 04 '18 at 23:01
i think they were just trying to convey that they were wanting to read/list/use the directory in a client browser, also they had _"the problem is that I CANT use PHP because my server doesnt support it "_ showing that they needed something server side unless they are completely unaware and think that servers can read a clients directory – Patrick Evans Apr 04 '18 at 23:08
Yeah - thanks. I think this one is kind of dead anyway. The constraints cannot be overcome it appears. – Randy Casburn Apr 04 '18 at 23:10

Getting a file list from a directory on client side

1 Answers1

Linked