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 />
<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);
});
©2020 All rights reserved.