xee-file-picker

Synopsis

AngularJs directive for <input type=file> using custom html element(s).

Code Example

html

<div xee-file-picker xee-file="fileObj" xee-data-url="dataUrl">
    <img ng-src="{{dataUrl || 'default/image/url'}}">
    <span>Choose Image</span>
</div>

js controller

var formData = new FormData;
formData.put('file', $scope.fileObj);
$http.post('file/upload/api', formData, {transformRequest: angular.identity, headers: {'Content-Type': undefined}});

Motivation

Often times, every time you need to have a customized file picker element in your forms, this directive lets you have that ease. It returns the chosen file in a scope property and also a data url for the file to display or play(in case of audio/video file) on the go.

Installation

• Install using npm npm install --save xee-file-picker.

• Add the script in your index.html after angular.js path/to/node_modules/xee-file-picker/dist/xee-file-picker.min.js.

• Add dependency in your application module angular.module('my-app', ['xee-file-picker']) (or simply) angular.module('my-app', ['xee']).

(I usually bundle my packages under 'xee' module so that if the application is using multiple packages of xee, the dependencies remain simple ;) Smart?)

Options

• allow (default: '*' // allow all files) an array of allowed mime types. e.g ['jpg', 'png'] or a string 'mp4'.

• minFileSize (default: 1024) 1KB in bytes.

• maxFileSize (default: 8e+6) 8MB in bytes.

Events

Following events are triggered on $rootScope.

• xee-fp-fileNotAllowed If mime type of file chosen is not allowed.

• xee-fp-invalidFileSize If chosen file is not with in the default or set size limits (see Options).

Todo list

• Choose multiple

Contributors

None *_*

License

MIT