acha-framework/src/frontend/core/scripts/directives/file-picker-server/template.html

is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...

<div ng-show="visible"
     ng-click="vm.prevent($event)"
     class="af-file-picker-server {{disabled?'disabled':''}} af-component input-group {{::cssClass}}">
    <input ng-click="vm.togglePlate()"
           value="{{model||''}}"
           class="form-control"
           placeholder="{{::placeHolder|textOrTranslate:placeHolderTranslate}}"
           type="text"
           readonly="readonly">
    <span ng-click="vm.togglePlate()" class="input-group-addon">
        <i class="fa fa-globe"></i>
    </span>
    <div class="plate clearfix" ng-if="vm.plate">
        <div class="tree-container">
            <tree on-node-expand="vm.onNodeExpand"
                  on-node-select="vm.onNodeSelect"
                  items="vm.tree"></tree>
        </div>
        <div class="explorer-container">
            <waiting ng-if="vm.waiting"></waiting>
            <file-explorer ng-if="!vm.waiting"
                           path="vm.path"
                           mode="'medium'"
                           multiple-selection="false"
                           on-parent="vm.onExplorerParent"
                           on-double-select="vm.onExplorerDoubleSelect"
                           on-select="vm.onExplorerSelect"
                           items="vm.fileExplorer">
            </file-explorer>
        </div>
    </div>
</div>