xee-file-picker
v1.0.0
Published
AngularJs directive for `<input type=file>` using custom html element(s).
Downloads
3
Readme
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