AngularJS file explorer

Question

I am not sure how to go about doing this in an angular way.

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

features it should implement are:

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

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

Any advice on how to implement this?

Solution 1

Take look at @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);
    }
};

Solution 2

Found a solution:

Angular Treeview

Pure AngularJS based tree menu directive.