angular-filepicker

Filepicker library for AngularJS. It is simple wrapper of filepicker JS library.

DEMO

Usage

* Include filepicker.js script v2 or v1 and include angular-filepicker script - you can copy it from dist directory

OR

* 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`




Features

$3


filepickerService is wrapper on `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 docs

Example 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
``

License

MIT