Multiple File Upload Directive for AngularJS

AngularJS directive for multiple file upload, with progress feedback, preview and resize

This directive help you to create a better looking system to control your file uploads using the "Angular Way" with no dependencies, just HTML5 and pure javascript

As a directive, the entire process can be easily customized with your own CSS and HTML and using resources already available on AngularJS just like "ng-repeat" etc...

Example:

<file-upload class="btn btn-success btn-rad btn-trans file-upload" name="userFile" resize="true" max-width="1280" max-height="1280" ng-model="my.foo.model" multiple="false" uri="/upload/upload" accept="image/png, image/jpg">
    <i class="fa fa-upload"></i>
    <span>Upload Files</span>
    <ul>
        <li ng-repeat="p in my.foo.model" ng-hide="p.percent == 100">
            <small>{{ p.name }}</small>
            <div class="progress">
                <div class="progress-bar" style="width: {{ p.percent }}%;"></div>
            </div>
        </li>
    </ul>
</file-upload>

This directive will keep it's model update with whole information about selected files, progress and status.

Attributes

ng-model: required
disabled: (model) default false (If you want to disable file selection for example if you want to add an Delete buttom inside the image area)
name: default 'userFile'
uri: default '/upload/upload'
multiple: default 'true'
accept: default empty (Accept comma-separated list of MIME Types)
credentials: default 'false' (Share your credentials between your browser and the API)
preview: default 'false' (Process a base64 preview of the selected image)
file-selector: default 'false' (By default the whole area is clickable but you may want to select the file targeting some other element inside the directive, uses css selector such as "span.file-buttom")
resize: default 'false' (Must be used with max-width and max-height)
max-width: default 'false' (Must be used with resize and max-height)
max-height: default 'false' (Must be used with resize and max-width)

Return

Charge it's model with an Array of objects

[{
  name: file.name,
  size: file.size,
  type: file.type,
  status: {
    code: xhr.status,
    statusText: xhr.statusText,
    response: xhr.response
  },
  percent: 0,
  preview: data:base64
}]

Bower

bower install angular-multiple-file-upload --save

wender/angular-multiple-file-upload

Multiple File Upload Directive for AngularJS

Example:

Attributes

Return

Bower