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

<script type="text/javascript" src="bower_components/filepicker-js/dist/filepicker.js"></script>
<script type="text/javascript" src="bower_components/angular-filepicker/dist/angular_filepicker.js"></script>

• 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

``filepickerService``

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));
    };
});

``filepicker`` directive

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:

<input filepicker type="filepicker-dragdrop" data-fp-services="computer,facebook,dropbox,box" on-success="onSuccess(event.fpfile)" />;

``filepicker-preview`` directive

It is equivalent of embedded filepicker viewer widget docs. Directive restricts attribute mode. The only attribute is ``url`` . Must be filepicker type link. Example:

<div filepicker-preview url="previewUrlExample" style="width:90%; height:500px"></div>

``fpConvert`` filter

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