acha-framework/src/frontend/core/scripts/directives/file-picker/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"
     class="af-file-picker af-component {{::cssClass}}">
    <div class="input-group">
        <div class="input-group-btn">
            <div class="btn btn-primary btn-file"
                 ngf-select="vm.onSelect($files)"
                 ngf-pattern="pattern"
                 ngf-accept="accept"
                 ngf-multiple="{{::multiple}}"
                 ngf-max-size="{{::maxSize}}"
                 ngf-change="vm.onChange($files, $file, $newFiles, $duplicateFiles, $invalidFiles, $event)"
                 ng-model="vm.model"
                 ngf-disabled="disabled || vm.uploading">
                {{::'general.browse'|translate}}&hellip;
            </div>
        </div>
        <input value="{{vm.getText()}}"
               type="text"
               class="form-control" readonly>
    </div>
    <div class="preview"
         ng-if="::preview"
         ng-repeat="item in model">
        <img width="200"
             ngf-thumbnail="item || '/framework/images/placeholder.png'">
        <i class="delete fa fa-trash" ng-click="vm.remove(item)"></i>
    </div>
    <progressbar ng-if="vm.uploading"
                 css-class="'progress-xxs'"
                 model="vm.uploadPercent"></progressbar>
</div>