Get list of filenames in folder with Javascript

The current code will give a list of all files in a folder, assuming it's on the server side you want to list all files:

var fs = require('fs');
var files = fs.readdirSync('/assets/photos/');

No, Javascript doesn't have access to the filesystem. Server side Javascript is a whole different story but I guess you don't mean that.

I write a file dir.php

var files = <?php $out = array();
foreach (glob('file/*.html') as $filename) {
    $p = pathinfo($filename);
    $out[] = $p['filename'];
}
echo json_encode($out); ?>;

In your script add:

<script src='dir.php'></script>

and use the files[] array

For client side files, you cannot get a list of files in a user's local directory.

If the user has provided uploaded files, you can access them via their input element.

<input type="file" name="client-file" id="get-files" multiple />


<script>
var inp = document.getElementById("get-files");
// Access and handle the files 

for (i = 0; i < inp.files.length; i++) {
    let file = inp.files[i];
    // do things with file
}
</script>

For getting the list of filenames in a specified folder, you can use

**fs.readdir(directory_path, callback_function)**

This will return a list which you can parse by simple list indexing like file[0],file[1] etc. Hope this helps.

I use the following (stripped-down code) in Firefox 69.0 (on Ubuntu) to read a directory and show the image as part of a digital photo frame. The page is made in HTML, CSS and JavaScript and is located on the same machine where I run the browser. The images are located on the same machine as well, so there is no viewing from "outside".

var directory=<path>;
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", directory, false ); // false for synchronous request
xmlHttp.send( null );
var ret=xmlHttp.responseText;
var fileList=ret.split('\n');
for(i=0;i<fileList.length;i++){
    var fileinfo=fileList[i].split(' ');
    if ( fileinfo[0] == "201:" ) {
        document.write(fileinfo[1]+"<br />");
        document.write("<img src=\""+directory+fileinfo[1]+"\" />");
    }
}

This requires the policy security.fileuri.strict_origin_policy to be disabled. This means it might not be a solution you want to use. In my case I deemed it ok.

I made a different route for every file in a particular directory. Therefore, going to that path meant opening that file.

function getroutes(list){
list.forEach(function(element) {
  app.get("/"+ element,  function(req, res) {
    res.sendFile(__dirname + "/public/extracted/" + element);
  });
});

I called this function passing the list of filename in the directory __dirname/public/extracted and it created a different route for each filename which I was able to render on server side.

Create a php file called 'files.php' with following content:

<?php 
$out = array();
foreach (glob('/assets/photos/*') as $filename) {
    $p = pathinfo($filename);
    $out[] = $p['basename'];
}
echo json_encode($out); 
?>

then call it with jQuery:

$.getJSON('files.php').then(function (response) {
     console.log(response);
});