Easiest way to get list of files in the server directory

Question

I need to get array of all images (or simply of all files) in directory (e.g. www.example.com/images/). I prefer to use JavaScript but it's hard to make. So should I use PHP, meybe?

Could you please help me - I'm not good at this.

Thank you very much!

You need to use server-side PHP in order to access files on a server. You can start [here](http://php.net/manual/en/function.scandir.php) — James Newton, Jun 03 '15 at 14:05
Or look here: http://stackoverflow.com/questions/26150336/can-i-use-javascript-to-get-a-file-directory-list (Sorry, I don't know how to mark as duplicate) — Erwin Moller, Jun 03 '15 at 14:06

score 11 · Answer 1 · edited May 15 '23 at 11:51

11

I disagree with @mariobgr's answer. If there is no server setting preventing a directory listing, then the html generated by requesting that directory can be parsed for the contents.

$ tree maindir
maindir
├── index.html
└── somedir
    ├── doc1
    ├── doc2
    └── doc3

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><!--  JQUERY  -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <title></title>
</head>
<body>
  <h1>Listing /somedir</h1><!-- Custom Script (defered load, after dom ready) -->
  <script>
    $.getJSON('./somedir', data => {
        console.log(data); //["doc1.jpg", "doc2.jpg", "doc3.jpg"] 
    });
  </script>
</body>

edited May 15 '23 at 11:51

Ardent Coder

3,777
9
27
53

answered Apr 02 '18 at 07:56

abalter

9,663
17
90
145

I created a website project with VS and try your solution but unfortunately, nothing appears. do I need to setup anything? – Amir Oct 07 '18 at 10:31
4

@Amir Make sure you have directory listing enabled on the directory. – Sid Holland Dec 03 '18 at 05:24
https://wiki.apache.org/httpd/DirectoryListings https://nginxlibrary.com/enable-directory-listing/ – abalter Dec 04 '18 at 06:03

score 8 · Accepted Answer · edited Aug 30 '23 at 08:31

8

Javascript cannot fetch all files on a server, as it is a client-side language.

This documentation provides what you need.

$all = glob('/path/to/dir/*.*');

$images = glob('/path/to/dir/*.{jpg,png,gif}');

edited Aug 30 '23 at 08:31

NickS1

496
1
6
19

answered Jun 03 '15 at 14:07

mariobgr

2,143
2
16
31

Well, yes, but node.js seems to be an overkill is this case. Did you try my suggestion? – mariobgr Jun 03 '15 at 14:19
Thank you very much. I tried this but now I detect error which cause it doesn't work. When I use echo in give text "Array", I guess it's fine. Now I just need to loop throught this array to get file names - am I right? – Jan Chalupa Jun 03 '15 at 14:23
This doesn't work. `$images = glob('http://www.honzachalupa.cz/dev/imgs/*.{jpg,png}'); foreach($images as $image) { print $image; }` – Jan Chalupa Jun 03 '15 at 14:27
Don't use the domain, but the path to the images directory. For example `/home/example.com/public_html/images` – mariobgr Jun 03 '15 at 14:32
Even if I use relative path and change print to echo it won't work. `` – Jan Chalupa Jun 03 '15 at 14:38
I doubt that's the path to your images. Put `echo getcwd(); ` in your script to see the actual directory you are in. – mariobgr Jun 03 '15 at 14:39
`echo getcwd();` gives me `D:\v000000\honzachalupa.cz\WWWRoot\dev` Directory of my images is e.g. `www.honzachalupa.cz/dev/imgs/bg-1.jpg`, bg-2.jpg etc. – Jan Chalupa Jun 03 '15 at 14:44
so you should execute `glob(D:\v018912\honzachalupa.cz\WWWRoot\dev\imgs\*.{jpg,png}'');` – mariobgr Jun 03 '15 at 14:45
It won't help. I'm probably cursed... :) – Jan Chalupa Jun 03 '15 at 14:49
I removed the extension ´{jpg,png}´ and in works. :) – Jan Chalupa Jun 04 '15 at 08:07
Can this search for files recursively through multiple folders? – Christian Sirolli Mar 16 '18 at 22:47

WILL fill · Answer 3 · 2021-01-29T21:44:19.090

I managed to do it in base javascript using a modifyed ajax command to get the folder list as an html file. Then I grep the file names from inside of it:

function loadDoc() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    
                    // gets the entire html file of the folder 'logpost' in this case and labels it thing
                    thing = this.responseText
                    searchFor = /.html</g
                    a=0;
                    b=0;
                    var str = "";
            
                    // greps file for .html and then backs up leter by letter till you hot the file name and all
                    while ((dothtmls = searchFor.exec(thing)) != null ){

                        str = "";
                        console.log(dothtmls.index);
                        
                        a = dothtmls.index;

                        while (thing[a]  != '>' ){
                            a--;
                        }
                        a++;
                        while(thing[a] != '<'){
                            str = str + thing[a];
                            a++;
                        }
                        console.log(str);
                    } 
                }
            };
            xhttp.open("GET", "logpost/", true);
            xhttp.send();
            }

This is probably not the cleanist way but if you are working on a static web sever it should work :)

Unfortunately this code does not work on Firefox and Chrome due to a [CORS policy](https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730) — Kristianne Nerona, Apr 09 '21 at 22:35

Easiest way to get list of files in the server directory

3 Answers3

Linked