Noticeably Playful Monkeys


    1.0.2 • Public • Published


    This library provides a simple factory and directives for file uploading in Angular.

    At the moment it's a thin wrapper around nervgh's angular-file-upload library, with the following added features:

    • Wraps the library inside the UMD pattern for module loaders.
    • Sends an HTTP header (X-XSRF-TOKEN) with the CSRF token.



    bower install --save banno-file-upload

    This library can either be loaded through the normal <script> tags, or by a module loader such as RequireJS.


    To use, include banno.fileUploader in your Angular module.

    angular.module('myApp', ['banno.fileUploader'])
    .controller('myController', function($scope, BannoUploader) {
      $scope.uploader = new BannoUploader('', {
        removeAfterUpload: true
    <div ng-app="app">
        <div ng-controller="myController">
            <input type="file" upload-selected uploader="uploader"/><br/>
                <li ng-repeat="item in uploader.queue">
                    Name: <span ng-bind=""></span><br/>
                    <button ng-click="item.upload()">upload</button>
    • Create uploader instances in your controller by calling new BannoUploader(uploadUrl).

    • Upload files through a file selection element with upload-selected:

      <input type="file" upload-selected uploader="{your BannoUploader instance}">
    • Upload files through drag-and-drop by specifying a upload-dropped destination element:

      <element upload-dropped uploader="{your BannoUploader instance}"></element>

      To add a CSS class to a upload-dropped element when a user has dragged a file over the drop area, use upload-over-class:

      <element upload-dropped upload-over-class="cssClass" uploader="{your BannoUploader instance}"></element>

    For details on the available options and the APIs, see the documentation for the library that this library is based on.


    When creating a new BannoUploader instance, you can also pass an object to configure the uploader:

    $scope.uploader = new BannoUploader('', {
      autoUpload: false,
      removeAfterUpload: true

    The default options are:

      method: 'POST',
      autoUpload: true,
      queueLimit: 1

    CSRF / XSRF Protection

    By default the uploader will send a CSRF HTTP header, using a value from the site cookie. It uses the names defined in $http.defaults. These names can be overridden by passing xsrfHeaderName and xsrfCookieName options to the BannoUploader constructor:

    $scope.uploader = new BannoUploader('', {
      xsrfHeaderName: 'X-CSRF',
      xsrfCookieName: 'csrf_token'

    To not send a CSRF header, use a falsy value for xsrfHeaderName:

    $scope.uploader = new BannoUploader('', {
      xsrfHeaderName: null


    You'll need gulp installed on your machine to run the development tools. Then run gulp to run all of the tasks and watch the files for changes.

    Please add tests and maintain the existing styling when adding and updating the code.

    Bugs & Feature Requests

    Have an issue or feature request? Please open a new issue.


    Copyright 2015 Jack Henry & Associates Inc.

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.


    npm i banno-file-upload

    DownloadsWeekly Downloads






    Last publish


    • eheikes