Return Array with name of all files in directory

Question

I need my HTML5 page to return a Array with all existing file names and extensions in a directory within my site. I can do this in other server-side languages, but I would like to do it in JS. there is this possibility?

Answer 1

Directly nay is possible because javascript running on an HTML page runs in the browser of client and does not have access to the server file system, which is usually a serious security issue.

It would be possible if your server supported directory listing. You could do the parse from the file listing page and retrieve data from it. I searched an example using Apache HTTP Server and found this:

$.ajax({
  url: "http://yoursite.com/images/",
  success: function(data){
     $(data).find("td > a").each(function(){
        // will loop through 
        alert("Found a file: " + $(this).attr("href"));
     });
  }
});

Again, to reinforce, allowing file listings can be a security issue. But you could allow this for some specific folders.

Depending on your requirements, it would be better to create a REST service that returns a JSON with the list of required files, so you are not even "tied" to a specific folder.

Answer 2

As already mentioned this task is difficult/impossible on the client side, server-side languages are the correct way.

But since you ask, and assuming that the directory is on the same server and that the directory has an index with permission via htaccess; then on that index are all the files. So having this html page with a list of links jQuery can already work.

A suggestion:

$.ajax({
    url: url,
    context: document.body
}).done(function (data) {
    var allLinks = $(data).find('a');  
    var goodLinks = $.grep(allLinks, function (el) {
        return (el.pathname != '/'); 
    });
    var arrayFinal = [];
    $(goodLinks).each(function (i) {
        var objeto = {
            nome: this.pathname.split('.')[0],
            estencao: this.pathname.split('.')[1] || ''
        }
        arrayFinal.push(objeto);
    });
    console.log(goodLinks);
    console.log(arrayFinal[0]);
});

Example

Answer 3

Unable to access the file system via Javascript (in the browser).

Already using the server side with Node.js it is possible.

P.S.: One possible workaround would provide a page listing these server files for you and returning to you in some way (but note that the listing is done on the server side, which will have access to the file system).

Answer 4

You can do this with Node. Here’s a simple example. Create a folder of any name and create a file called 'readdir.js'; inside this folder create another folder named 'files', inside the folder create files 'texto1.txt', 'texto2.txt' and 'texto3.txt'.

// readdir.js 

var fs = require('fs');
var domain = require('domain').create();

fs.readdir('./arquivos',function(error,files){
   console.log(files);
});

domain.on("error",function(erros){
   console.log(erros);
});

Output: [ 'texto1.txt', 'texto2.txt', 'texto3.txt' ]

I believe that’s what you want to know.