0

I'm trying to get a list of all the file names in a directory and then print it on an HTML page. As I'm planning to use this for an HTML page, I use browserify to bundle my script code so that I am able to use the "require" function.

The script I am running is shown below:

let box = document.getElementById("displayhere");
var fs = require('fs');

let pathname = "./ElementImages";

var files = fs.readdirSync(pathname);
box.innerHTML = files;

When I run it, an error message comes up saying - Uncaught TypeError: fs.readdirSync is not a function. Is there any way to fix this?

tysh444
  • 61
  • 5
  • 1
    Even if there were a way, the browser is not allowed to access the file system, unless it's inside your web root. – connexo Jan 01 '22 at 22:32
  • Does this answer your question? [Reading file contents on the client-side in javascript in various browsers](https://stackoverflow.com/questions/750032/reading-file-contents-on-the-client-side-in-javascript-in-various-browsers) – Jared Smith Jan 03 '22 at 00:42

1 Answers1

2

No it can't be fixed. Browserify lets you make modules available in the browser that don't depend on core modules provided by node when run as an executable. File system access using the fs module is one such core module.

While you could perhaps try the draft File API in client side HTML, you would need user interaction to select a directory from a picker and serve the page using https 1 - which if you're running node on a local machine network, may require creating an unsigned security certificate using openSSL. However, if you go down this route the user will need to accept an unsigned security certificate, as well as correctly choosing the image directory, as well as be using a browser that supports yet to be standardized File API.

1Update with thanks to comment from @connexo

The showDirectoryPicker documentation currently states

This feature is available only in secure contexts (HTTPS)

However, localHost is being treated as a "secure context" in this regard by Chromium based browsers. Hence creating a security certificate and running a localHost server using HTTPS is not required for supporting browsers (noting Firefox has not implemented the File API as yet).

Also a directory picker cannot be opened programmatically in JavaScript without user interaction via a click or hand gesture event. Some test code to attempt to open a directory picker in various browsing contexts (doesn't work in sandboxed documents):

<!DOCTYPE html>
<html><head><meta charset="utf-8">
   <title>Dir Picker</title>
</script>
</head>
<body>
<button type="button" onclick="pick()">Show Directory Picker</button><br>
Did a directory picker open automatically? - See console if not.

<script>"use strict";
async function getDir() {
  const dirHandle = await window.showDirectoryPicker();
  //  console.log(dirHandle);
}
const pick= ()=> {
    getDir()
   .then(()=>console.log("Picker opened!"))
   .catch(err=>console.error("Failed to open picker from inline script:\n" + err.message
      + "\nuserAgent: " + navigator.userAgent));
}
pick(); // automatic attempt
</script>
</body>
</html>

Although the post doesn't cover details of how the HTML page is created, the results obtained are to be used in another HTML page. Depending on the infrastructure in use you could

  • generate the directory listing in node. If you need to serve it as an HTML page, create an HTML page on the server to do so.

  • generate the listing manually in a terminal using ls or dir commands, depending on operating system, direct the output to a file and text process the results.

traktor
  • 17,588
  • 4
  • 32
  • 53
  • `localhost` and `127.0.0.1` are considered **secure contexts** with regard to web API as far as I know. – connexo Jan 02 '22 at 08:49
  • @connexo Thanks for the tip! Firefox (my go to browser) doesn't support the File API as yet so I'll keep it in mind for the future. Testing in Edge was not contemplated :-) – traktor Jan 02 '22 at 22:46