Http server for node to list all files in a directory

Question

I'm pretty new to Node so I apologize if this is a simple question. But I'm trying to read the contents of a directory, ./resources, then display links to them on the webpage. The catch is that the files in the directory are dynamic, so I'm using fs.readdir in Node.

But the <h1> is not showing on the index.html page; any ideas why?

const resDir = "resources/";
const resDirFiles = [];

const app = http.createServer((req, res) => {

  ...

  fs.readFile(filePath, (err, content) => {
    if (err) {
      // To be implemented
    } else {
      res.writeHead(200, {
        "Content-type": contentType
      });
      res.end(content, "utf8", callback(req, res));
    }
  });
});

function callback(req, res) {
  if (req.url == "/" || req.url == "/index") {
    fs.readdir(resDir, (err, files) => {
      files.forEach(file => {
        resDirFiles.push(file);
        res.end("<h1>Ok</h1>"); // placeholder
      });
    });
  }
}

if you don't want Express, then, like @Neo is saying, you have to use something like `http-server` or `http` — João Pimentel Ferreira, Mar 11 '19 at 19:44
You're calling `res.end` twice. A request can only have one response. Do you want to send the file content, or your custom HTML response? Also `callback` does not return a function, so passing its return value to `res.end` has no effect. — Jake Holzinger, Mar 11 '19 at 23:06
Is there a way to send both the file content and a custom HTML response? — mbj, Mar 12 '19 at 01:32

João Pimentel Ferreira · Accepted Answer · 2019-03-12T18:44:14.723

1

This solution makes use of module http and it list all files in directory resDir. It also provides links to the files, but it doesn't work on all browsers/servers due to security concerns, to avoid giving a free gateway between the user and the server. For something more robust you should have a file server.

var path = require('path')
var http = require('http')
var find = require('find')

var resDir = __dirname

http.createServer(function (req, res) {
  res.setHeader('content-type', 'text/html')
  find.file(resDir, function (files) {
    res.write('<ul>')
    for (let i = 0; i < files.length; i++) {
      let fileRelative = path.relative(resDir, files[i])
      res.write('<li><a href="' + fileRelative + '">' + fileRelative + '</a></li>')
    }
    res.write('</ul>')
    res.end()
  })
}).listen(3000, function () {
  console.log('server start at port 3000')
})

Now you can access it on http://localhost:3000

edited Mar 12 '19 at 18:44

answered Mar 11 '19 at 19:45

João Pimentel Ferreira

14,289
10
80
109

Eventually I'm trying to list the files in the directory as links on the webpage, the `
Ok
` is just a placeholder. I haven't found a way to implement this yet. – mbj Mar 11 '19 at 20:14
@JLLKFO how do you want to list the files? In the html page? – João Pimentel Ferreira Mar 11 '19 at 22:24
@JLLKFO I changed the code according to your requirements. I used the module [`find`](https://www.npmjs.com/package/find), install it if necessary with `npm i find`. Can you test it? `__dirname` is the current directory where this script is stored but you can chose another one. – João Pimentel Ferreira Mar 11 '19 at 22:30
@JLLKFO I tested now on my node environment and it does work. Can you test it? – João Pimentel Ferreira Mar 11 '19 at 22:38
I just do not understand what do you mean by "links" – João Pimentel Ferreira Mar 11 '19 at 22:42
Thanks for your help so far! Your code seems to just list the files. I'm trying to literally have links to any files discovered in the `resources` folder, i.e. if there are two jpgs in there, I'd like to have two links to them from the homepage. But I also have an upload html page, where I can "upload" files into `resources`, after which returning home should list them. Does this make sense? – mbj Mar 12 '19 at 01:30
@JLLKFO I changed the code to be more precise according to your needs, but it doesn't work on all browsers, due to security concerns (imagine the user having access to server's files). What you want is a file server, and do not expect me to write one from scratch to you :) – João Pimentel Ferreira Mar 12 '19 at 18:39
@JLLKFO what you want is here: https://stackoverflow.com/a/29046869/1243247 – João Pimentel Ferreira Mar 12 '19 at 18:45
Ah, I hadn't even considered that. I'll take a look at your link. Thanks so much! – mbj Mar 12 '19 at 20:01

score 0 · Answer 2 · answered Mar 11 '19 at 18:36

0

You can straight away use lot of npm project for this, like http-server

answered Mar 11 '19 at 18:36

Neo

115
1
10

Http server for node to list all files in a directory

2 Answers2

Ok