AngularJS File Explorer

Question

I'm not sure how to do this with angular.

I would like to implement a file explorer similar to the following: example 1 or example 2

functions that it should implement:

• show files and folders in the current directory
• the ability to click on folders to expand them (as in the example)

So, I currently have a list of files and folders as an array of paths. This is generated by the onDrop or onChange event (from drag and drop or input).

Any tips on how to implement this?

Answer 1

Check out @ angular-filemanager

FileNavigator.prototype.buildTree = function(path) {
    var self = this;
    var recursive = function(parent, file, path) {
        var absName = path ? (path + '/' + file.name) : file.name;
        if (parent.name && !path.match(new RegExp('^' + parent.name))) {
            parent.nodes = [];
        }
        if (parent.name !== path) {
            for (var i in parent.nodes) {
                recursive(parent.nodes[i], file, path);
            }
        } else {
            for (var i in parent.nodes) {
                if (parent.nodes[i].name === absName) {
                    return;
                }
            }
            parent.nodes.push({name: absName, nodes: []});
        }
    };

    !self.history.length && self.history.push({name: path, nodes: []});
    for (var i in self.fileList) {
        var file = self.fileList[i].model;
        file.type === 'dir' && recursive(self.history[0], file, path);
    }
};

Answer 2

:

Angular Treeview

Pure AngularJS.

Answer 3

Try Angular Reader for the file system .

The implementation of the angular service for searching files by extension (a) asynchronously and synchronously by moving the file system starting from the specified root directory. Exclusive and / or uninformed catalogs may also be indicated. Three options for accessing the results are available: callback, promise (synchronization) and / or active array (asynchronous).