CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Ivan Bacher
Ivan Bacher

Reputation: 6154

AngularJS file explorer

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:

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?

Upvotes: 4

Views: 25303

Answers (3)

Ketan
Ketan

Reputation: 1517

Try Angular Filesystem Reader.

An angular service implementation to find files by extension(s) asynchronously and synchronously, by traversing the filesystem starting from the specified root directory. Exclusive and/or ignorable directories can be specified as well. Three options available to access the results: callback, Promise (sync) and/or a live array (async).

Upvotes: 0

Jonas Sciangula Street
Jonas Sciangula Street

Reputation: 1892

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);
    }
};

Upvotes: 5

Ivan Bacher
Ivan Bacher

Reputation: 6154

Found a solution:

Angular Treeview

Pure AngularJS based tree menu directive.

Upvotes: 1

Related Questions