Get list of filenames in folder with Javascript

My website is serving a lot of pictures from /assets/photos/ folder. How can I get a list of the files in that 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 />

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

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(); "GET", directory, false ); // false for synchronous request
xmlHttp.send( null );
var ret=xmlHttp.responseText;
var fileList=ret.split('\n');
    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:

$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) {


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.