Get list of filenames in folder with Javascript

Question

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

User · Answer

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 it 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    lt path gt   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  lt  fileList length  i          var fileinfo   fileList i  split           if  fileinfo 0      201              document write fileinfo 1      lt br gt             document write   lt img src       directory   fileinfo 1         gt               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

User · Answer

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

User · Answer

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

User · Answer

I write a file dir php  var files    lt  php  out   array    foreach  glob  file   html   as  filename         p   pathinfo  filename        out      p  filename      echo json encode  out     gt     In your script add    lt script src  dir php  gt  lt  script gt    and use the files   array

User · Answer

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

User · Answer

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

User · Answer

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     lt input type  file  name  client-file  id  get-files  multiple   gt     lt script gt  var inp   document getElementById  get-files       Access and handle the files   for  i   0  i  lt  inp files length  i          let file   inp files i          do things with file    lt  script gt

[javascript] Get list of filenames in folder with Javascript

Examples related to javascript