CODEWITHSUNDEEP
javascripthtmlfile
user1628340
user1628340

Reputation: 941

HTML/Javascript: Getting a List of all files and subdirectories in a given directory

I am working on an interface that allows the to access the file system on the client side. The user should be able to browse through the file system, select a directory and my system will display list of files and sub-directories of the selected directory.

I have tried using HTML5 File API, but that apparently only allows users to select files (not folders).

Any pointers/help in this direction will be appreciated.

Upvotes: 1

Views: 8243

Answers (2)

zfor
zfor

Reputation: 383

If it's still an open issue, then let me give you a solution that might work for you.

HTML

File input for selecting a directory: 

<input type="file" id="file-input" webkitdirectory="" directory=""/>

JavaScript

The following script collects all files from the given folder and from ALL sub folders. Even from sub-subfolders, etc.

$("#file-input").on("change", function(e) {
    var thefiles = e.target.files;
    $.each(thefiles, function(i, item) {
        var thefile = item;
        var reader = new FileReader();
        reader.onload = function() {
            files.push(thefile);
        };
        reader.readAsArrayBuffer(thefile);
    });

});

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50189

This cannot be done in JavaScript as it would be a potential security issue. Only files selected by the user via a file dialog can be accessed using JavaScript.

Here's a pretty nice article on the File API if you haven't come across it yet.

Upvotes: 5

Related Questions