AJAX: Listing out the content of a directory. Unable to resolve URL

Question

I'm trying to display some images contained in a folder, inside a div. I'm using AJAX to do that in a JavaScript file called edit that is one directory away from the index route. I'm using Node.js. The code I have written is as follows.

var folder = "../images/emojies/";
$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            // some code
        });
    }
});

I get this error: "GET /images/emojies/ 404"

The weird thing is that when I go to this for example: "/images/emojies/image.png", It finds the directory with no errors! It's like it can't find folders but it can find files?

routing code if needed:

  /* GET home page. */
  router.get('/', function(req, res, next) {
    res.render('index', { title: 'xx' });
  });

  /* GET edit page. */
  router.get('/edit', function(req, res, next) {
    res.render('edit', { title: 'xx' });
  });

Seems like you are trying to access a directory by `../images/emojies/`. What is the output that you are expecting from that? — Romeo Sierra, Jun 13 '18 at 04:01
Possible duplicate [Is there a way to return a list of all the image file names from a folder using only Javascript?](https://stackoverflow.com/questions/6994212/is-there-a-way-to-return-a-list-of-all-the-image-file-names-from-a-folder-using) — Dean, Jun 13 '18 at 04:06
displaying the images in that file in a div element @RomeoSierra — Yousef, Jun 13 '18 at 04:28
I know how to do it, the problem is with the Directory error ! @Dean — Yousef, Jun 13 '18 at 04:28
You can't achieve that with this way. Check [this link](https://code-maven.com/list-content-of-directory-with-nodejs) out. May be it would help.. — Romeo Sierra, Jun 13 '18 at 04:37

Romeo Sierra · Accepted Answer · 2018-06-13T09:05:26.030

1

You could have done something like follows.

var app = require('express')();
var http = require('http').Server(app);
var fs = require('fs');

var clients = 0;

app.get('/images/emojies', function(req, res) {
    var path = "public/images/emojies/"; //Could be obtained from req.path however, needs to resolve the path properly.
    fs.readdir(path, function(err, items) {
        res.send(items); // items is an array
    });
});

http.listen(3000, function() {
   console.log('listening on *:3000');
});

/images/emojies would be the endpoint that you would contact and you could use your existing AJAX request as follows.

var folder = "/images/emojies";
$.ajax({
    url : folder,
    success: function (data) {
        //Under data, you have a stringified array of the file names.
    }
});

The best thing about this method is that it gives you more fine-grained control over the file types and file names that you are going to expose, especially given that you are going to expose a part of your file system.

edited Jun 13 '18 at 09:05

answered Jun 13 '18 at 05:25

Romeo Sierra

1,666
1
17
35

Thank you!! that didn't work because the path should be right from the start; it should be "public/images/emojies". Thank you again – Yousef Jun 13 '18 at 08:53
One problem is that I'm getting a complete string that looks like an array when I use data, ["001-embarrassed-4.png","00... as one string not an array – Yousef Jun 13 '18 at 08:55
That you can parse into an object in javascript. See [`JSON.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse). Alternatively, you can change your request's `data-type` to be JSON like `data-type:"JSON"`... – Romeo Sierra Jun 13 '18 at 09:02
No problem. This is just a baseline answer, based on your question. Obviously, you might need to do a lot of cutting and chopping before you get that fitting into your solution.. :) – Romeo Sierra Jun 13 '18 at 09:06
I know, well, I can finally sleep now :) – Yousef Jun 13 '18 at 09:09

score 0 · Answer 2 · answered Jun 13 '18 at 04:10

0

You can use path module to fix your problem:

https://nodejs.org/api/path.html

I think that it should look like this:

var folder = path.normalize("../images/emojies/");

answered Jun 13 '18 at 04:10

someRandomSerbianGuy

471
4
18

Babashov Mehemmed · Answer 3 · 2018-06-13T04:44:45.813

In Nodejs when you access to folder you have to write folder root with ./ sign. For example

    var folder = "./../images/emojies/";//Firstly you have to write "./" it access to the same folder where your file is then go up another folder
    $.ajax({
        url : folder,
        success: function (data) {
            $(data).find("a").attr("href", function (i, val) {
                // some code
            });
        }
    });

AJAX: Listing out the content of a directory. Unable to resolve URL

3 Answers3