html file cannot find uploads directory

Question

I have an html file that is supposed to display every picture in the uploads directory, however it does not recognize an uploads directory. I am using a nodejs server. Here is my html file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>gummy bear</title>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href="css/styles.css" rel="stylesheet">
</head>
<body>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script>
  var dir = "/uploads/";
  var fileextension = ".jpg";
  $.ajax({
      url: dir,
      success: function (data) {
          $(data).find("a:contains(" + fileextension + ")").each(function () {
              var filename = this.href.replace(window.location.host, "").replace("http://", "");
              $("body").append("<img src='" + dir + filename + "'>");
          });
      }
  });
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

and here is what my directory layout looks like:

app.js  css  index.html  javascripts  LICENSE  node_modules  package.json  README.md  upload.html  uploads

and inside of uploads is:

➜  uploads ls
1.jpg

Thanks in advance!

I don't know node.js but I don't think you can just send a request to a directory. There must be a script returning the files. Theres the `fs` module in node.js — pixelarbeit, Jan 22 '17 at 23:26
@DennisKoch You're correct in this assumption, jQuery's `ajax()` function needs to be used to call a script to return data, if any. Check out the documentation on the function [here](http://api.jquery.com/jquery.ajax/). — Jeffrey, Jan 22 '17 at 23:52
Check out this question: http://stackoverflow.com/questions/2727167/getting-all-filenames-in-a-directory-with-node-js — pixelarbeit, Jan 22 '17 at 23:53
I don't think that is the problem. I think that for some reason the server is trying to get that url. it does not give an ajax error it give a 404 error: GET http://localhost:3000/uploads/ 404 (Not Found) and when I try to go to localhost:3000/uploads/ it givves me: Cannot GET /uploads/ — zoecarver, Jan 23 '17 at 00:04
Because /uploads/ is a directory and not an executable script?! I don't know whether node.js provides directory listing. — pixelarbeit, Jan 23 '17 at 00:44

score 1 · Accepted Answer · answered Jan 23 '17 at 01:02

Looking through the sample code it seems like the HTML file expects some HTML to be returned from http://localhost:3000/uploads.

The questions is why does the /uploads endpoint not return anything but instead returns a 404 response?

The answer to this would lie in the main executable Javascript file in the node.js application. Likely a file called server.js or index.js.

Here is an example of how you would go about creating the correct node.js application for you HTML file to work:

server.js

app.all('/uploads', function (req, res) {
    var folder = './public/uploads',
        html = '<html><body>##files##</body></html>';

    fs.readdir(folder, (err, files) => {
        var fileHrefs = '';

        files.forEach(function (file) {
            fileHrefs += '<a href="http://localhost:3000/uploads/' + file + '">' + file + '</a>';
        });

        html = html.replace('##files##', fileHrefs);

        res.send(err || html);
    })
});

This snippet of code iterates over all files in the uploads directory and wraps them in an a tag which is then returned by the server.

index.html

To make your index HTML file work a couple small changes need to be made:

change $(data).find() to $(data).filter()
remove the directory from the image source. change <img src='" + dir + filename + "'> to <img src='" + filename + "'>

Complete working sample

You can also find the whole working sample here: https://github.com/kohlikohl/list-images-in-dir

Thank you so much! this is hands down the best answer someone ever gave me. thank you so much for your help! — zoecarver, Jan 23 '17 at 04:54

html file cannot find uploads directory

1 Answers1