AngularJS bindings for Filepicker js library
npm install angular-filepickerOR
* Install via bower: ``bower install angular-filepicker` and include scripts``
* Add `'angular-filepicker'` module as dependency for your angular app. Example:``
angular.module('angularFilepickerExample', ['ngRoute', 'angular-filepicker'])`
* Set apikey. If you dont have one - register free account here. Setting key is possible in 3 ways:
- use filepickerProvider.setKey` method. This way key will be set in configuration phase.``
angular.module('angularFilepickerExample')
.config(function (filepickerProvider) {
filepickerProvider.setKey('yourAPIKEY');
});`
- use filepickerService.setKey` method.`
- use data-fp-apikey` directive attribute.
* You can access angular-filepicker by `filepicker` directive or `filepickerService`
window.filepicker` global. Avaliable methods: `setKey, pick, pickFolder, pickMultiple, pickAndStore, read, write, writeUrl, export, processImage, store, storeUrl, stat, metadata, remove, convert, constructWidget, makeDropPane`. See detailed docsExample of using service in the controller:
`
angular.module('angularFilepickerExample')
.controller('GalleryCtrl', function ($scope, filepickerService, $window) {
$scope.files = JSON.parse($window.localStorage.getItem('files') || '[]'); $scope.pickFile = pickFile;
$scope.onSuccess = onSuccess;
function pickFile(){
filepickerService.pick(
{mimetype: 'image/*'},
onSuccess
);
};
function onSuccess(Blob){
$scope.files.push(Blob);
$window.localStorage.setItem('files', JSON.stringify($scope.files));
};
});
`$3
It allows you to use filepicker widgets in angular templates. It support all attributes from the docs, the only diffrence is use of `on-success` instead of `onchage`. Directive restricts attribute mode.
Avaliable widtet types: `filepicker`, `filepicker-dragdrop`, `filepicker-convert`.Example:
`
;
`$3
It is equivalent of embedded filepicker viewer widget docs. Directive restricts attribute mode.
The only attribute is `url` . Must be filepicker type link.
Example:`
`$3
Give nice an easy way to benefit from filepicker images conversion. Usefull if you need thumbnail or crop image.
Example (image resized to width=200)`
![]()
`
Other conversion options:
* Resizing,
* fitting and aligning Cropping
* Watermarking Formatting,
* compression and quality
* Rotating
* Adding filters Detailed docs
Demo
Demo avaliable in the /demo directory.
To run demo on localhost:
`
npm install
npm run serve
` Local server will be launched http://localhost:8080/demo/
Contributing
Contributing welcomed. To build dist run:
`
npm install
npm build
``