├── .gitignore
├── LICENSE
├── README.md
├── dist
    ├── angular-filepond.module.d.ts
    ├── angular-filepond.module.js
    ├── angular-filepond.module.js.map
    ├── angular-filepond.module.metadata.json
    └── component
    │   ├── filepond.component.d.ts
    │   ├── filepond.component.js
    │   ├── filepond.component.js.map
    │   └── filepond.component.metadata.json
├── package.json
├── src
    ├── angular-filepond.module.ts
    ├── component
    │   └── filepond.component.ts
    ├── index.ts
    └── tsconfig.json
├── tsconfig.json
└── typings
    └── filepond.d.ts


/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 | node_modules/
3 | .DS_Store
4 | package-lock.json


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 PQINA | Rik Schennink <rik@pqina.nl>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | **This adapter has been deprecated, please use [ngx-filepond](https://github.com/pqina/ngx-filepond) instead.**
 3 | 
 4 | ---
 5 | 
 6 | # Angular FilePond
 7 | 
 8 | Angular FilePond is a handy adapter component for [FilePond](https://github.com/pqina/filepond), a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
 9 | 
10 | [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/angular-filepond/blob/master/LICENSE)
11 | [![npm version](https://badge.fury.io/js/angular-filepond.svg)](https://www.npmjs.com/package/angular-filepond)
12 | [![Donate with PayPal](https://img.shields.io/badge/donate-PayPal.me-pink.svg)](https://www.paypal.me/rikschennink/10)
13 | 
14 | <img src="https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif?raw=true" width="370" alt=""/>
15 | 
16 | ## Installation
17 | 
18 | Install FilePond component from npm.
19 | 
20 | ```bash
21 | npm install angular-filepond --save
22 | ```
23 | 
24 | Add `FilePond` to an NgModule and if needed register any plugins. Please note that plugins need to be [installed from npm](https://pqina.nl/filepond/docs/api/plugins/) separately.
25 | 
26 | ```js
27 | import { FilePond, registerPlugin } from 'angular-filepond';
28 | 
29 | // Registering plugins
30 | import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm';
31 | registerPlugin(FilePondPluginFileValidateType);
32 | 
33 | // Adding FilePond to imports
34 | @NgModule({
35 |   imports: [
36 |     FilePond
37 |   ]
38 | })
39 | 
40 | export class AppModule { }
41 | ```
42 | 
43 | Add the FilePond stylesheet to your `angular-cli.json` build script.
44 | 
45 | ```json
46 | "styles": [
47 |   "styles.css",
48 |   "../node_modules/filepond/dist/filepond.min.css"
49 | ]
50 | ```
51 | 
52 | Now FilePond can be used in your templates.
53 | 
54 | ```js
55 | import { Component, ViewChild } from '@angular/core';
56 | 
57 | @Component({
58 |   selector: 'app-root',
59 |   template: `
60 |     <div class="root">
61 |         <FilePond #myPond 
62 |             name="my-name" 
63 |             className="my-class" 
64 |             labelIdle="Drop files here..."
65 |             allowMultiple="true"
66 |             acceptedFileTypes="image/jpeg, image/png"
67 |             server="/api"
68 |             [files]="myFiles" 
69 |             (oninit)="handleFilePondInit()">
70 |         </FilePond>
71 |     </div>
72 |   `
73 | })
74 | 
75 | export class AppComponent {
76 | 
77 |   myFiles = ['index.html'];
78 | 
79 |   // Allows us to get a reference to the FilePond instance
80 |   @ViewChild('myPond') myPond: any;
81 | 
82 |   handleFilePondInit = () => {
83 | 
84 |     console.log('FilePond has initialised');
85 | 
86 |     // FilePond instance methods are available on `this.myPond`
87 | 
88 |   }
89 | }
90 | ```
91 | 
92 | [Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/angular/)
93 | 


--------------------------------------------------------------------------------
/dist/angular-filepond.module.d.ts:
--------------------------------------------------------------------------------
1 | export * from './component/filepond.component';
2 | export declare class FilePondModule {
3 | }
4 | 


--------------------------------------------------------------------------------
/dist/angular-filepond.module.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @fileoverview added by tsickle
 3 |  * @suppress {checkTypes} checked by tsc
 4 |  */
 5 | import { NgModule } from '@angular/core';
 6 | import { FilePond } from './component/filepond.component';
 7 | export { registerPlugin, FilePond } from './component/filepond.component';
 8 | var FilePondModule = /** @class */ (function () {
 9 |     function FilePondModule() {
10 |     }
11 |     FilePondModule.decorators = [
12 |         { type: NgModule, args: [{
13 |                     declarations: [FilePond],
14 |                     exports: [FilePond],
15 |                     providers: []
16 |                 },] },
17 |     ];
18 |     return FilePondModule;
19 | }());
20 | export { FilePondModule };
21 | function FilePondModule_tsickle_Closure_declarations() {
22 |     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
23 |     FilePondModule.decorators;
24 |     /**
25 |      * @nocollapse
26 |      * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
27 |      */
28 |     FilePondModule.ctorParameters;
29 | }
30 | //# sourceMappingURL=angular-filepond.module.js.map


--------------------------------------------------------------------------------
/dist/angular-filepond.module.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"angular-filepond.module.js","sourceRoot":"","sources":["../src/angular-filepond.module.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,yCAAc,gCAAgC,CAAC;;;;;gBAE9C,QAAQ,SAAC;oBACN,YAAY,EAAE,CAAC,QAAQ,CAAC;oBACxB,OAAO,EAAE,CAAC,QAAQ,CAAC;oBACnB,SAAS,EAAE,EAAE;iBAChB;;yBATD;;SAWa,cAAc","sourcesContent":["import { NgModule } from '@angular/core';\n\nimport { FilePond } from './component/filepond.component';\nexport * from './component/filepond.component';\n\n@NgModule({\n    declarations: [FilePond],\n    exports: [FilePond],\n    providers: []\n})\n\nexport class FilePondModule { }"]}


--------------------------------------------------------------------------------
/dist/angular-filepond.module.metadata.json:
--------------------------------------------------------------------------------
1 | [{"__symbolic":"module","version":4,"metadata":{"FilePondModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./component/filepond.component","name":"FilePond","line":6,"character":19}],"exports":[{"__symbolic":"reference","module":"./component/filepond.component","name":"FilePond","line":7,"character":14}],"providers":[]}]}]}},"exports":[{"from":"./component/filepond.component"}]}]


--------------------------------------------------------------------------------
/dist/component/filepond.component.d.ts:
--------------------------------------------------------------------------------
 1 | import { ElementRef, SimpleChanges, NgZone } from '@angular/core';
 2 | export declare const registerPlugin: (...args: any[]) => void;
 3 | export declare class FilePond {
 4 |     private _ngZone;
 5 |     private _pond;
 6 |     private _root;
 7 |     private _element;
 8 |     private _options;
 9 |     constructor(_root: ElementRef, _ngZone: NgZone);
10 |     ngAfterViewInit(): void;
11 |     ngOnChanges(changes: SimpleChanges): void;
12 |     ngOnDestroy(): void;
13 | }
14 | 


--------------------------------------------------------------------------------
/dist/component/filepond.component.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @fileoverview added by tsickle
  3 |  * @suppress {checkTypes} checked by tsc
  4 |  */
  5 | import { Component, EventEmitter, ViewEncapsulation, ElementRef, NgZone } from '@angular/core';
  6 | import { OptionTypes, create, supported, registerPlugin as register } from 'filepond';
  7 | // Do this once
  8 | var /** @type {?} */ isSupported = supported();
  9 | // Methods not made available to the component
 10 | var /** @type {?} */ filteredComponentMethods = [
 11 |     'setOptions',
 12 |     'on',
 13 |     'off',
 14 |     'onOnce',
 15 |     'appendTo',
 16 |     'insertAfter',
 17 |     'insertBefore',
 18 |     'isAttachedTo',
 19 |     'replaceElement',
 20 |     'restoreElement',
 21 |     'destroy'
 22 | ];
 23 | // All the properties that can be bound
 24 | var /** @type {?} */ inputs = [];
 25 | // All the events that need to be mapped to emitters
 26 | var /** @type {?} */ outputs = [];
 27 | var /** @type {?} */ update = function () {
 28 |     inputs.length = 0;
 29 |     outputs.length = 0;
 30 |     for (var /** @type {?} */ prop in OptionTypes) {
 31 |         // don't add events to the props array
 32 |         // don't add events to the props array
 33 |         if (/^on/.test(prop)) {
 34 |             outputs.push(prop);
 35 |             continue;
 36 |         }
 37 |         // get property type
 38 |         inputs.push(prop);
 39 |     }
 40 | };
 41 | var ɵ0 = update;
 42 | // get initial inputs and outputs
 43 | update();
 44 | export var /** @type {?} */ registerPlugin = function () {
 45 |     var args = [];
 46 |     for (var _i = 0; _i < arguments.length; _i++) {
 47 |         args[_i] = arguments[_i];
 48 |     }
 49 |     // register plugin
 50 |     register.apply(void 0, args);
 51 |     // update props
 52 |     update();
 53 | };
 54 | var FilePond = /** @class */ (function () {
 55 |     function FilePond(_root, _ngZone) {
 56 |         var _this = this;
 57 |         this._ngZone = _ngZone;
 58 |         this._root = _root;
 59 |         // init with empty options object
 60 |         this._options = {};
 61 |         // Programmatically create event emitters for output properties
 62 |         outputs.forEach(function (output) {
 63 |             _this[output] = new EventEmitter();
 64 |         });
 65 |     }
 66 |     /**
 67 |      * @return {?}
 68 |      */
 69 |     FilePond.prototype.ngAfterViewInit = /**
 70 |      * @return {?}
 71 |      */
 72 |     function () {
 73 |         var _this = this;
 74 |         this._element = this._root.nativeElement.querySelector('input');
 75 |         // Map FilePond callback methods to Angular $emitters
 76 |         var /** @type {?} */ emitters = outputs.reduce(function (obj, output) {
 77 |             obj[output] = function () {
 78 |                 var args = [];
 79 |                 for (var _i = 0; _i < arguments.length; _i++) {
 80 |                     args[_i] = arguments[_i];
 81 |                 }
 82 |                 (_a = _this[output]).emit.apply(_a, [output].concat(args));
 83 |                 var _a;
 84 |             };
 85 |             return obj;
 86 |         }, {});
 87 |         // will block angular from listening to events inside the pond
 88 |         this._ngZone.runOutsideAngular(function () {
 89 |             _this._pond = create(_this._element, Object.assign(_this._options, emitters));
 90 |         });
 91 |         // Copy instance method references to component instance
 92 |         Object.keys(this._pond)
 93 |             .filter(function (key) { return !filteredComponentMethods.includes(key); })
 94 |             .forEach(function (key) {
 95 |             _this[key] = _this._pond[key];
 96 |         });
 97 |     };
 98 |     /**
 99 |      * @param {?} changes
100 |      * @return {?}
101 |      */
102 |     FilePond.prototype.ngOnChanges = /**
103 |      * @param {?} changes
104 |      * @return {?}
105 |      */
106 |     function (changes) {
107 |         for (var /** @type {?} */ key in this) {
108 |             if (!inputs.includes(key)) {
109 |                 continue;
110 |             }
111 |             this._options[key] = this[key];
112 |         }
113 |         if (!this._pond) {
114 |             return;
115 |         }
116 |         this._pond.setOptions(this._options);
117 |     };
118 |     /**
119 |      * @return {?}
120 |      */
121 |     FilePond.prototype.ngOnDestroy = /**
122 |      * @return {?}
123 |      */
124 |     function () {
125 |         if (!this._pond) {
126 |             return;
127 |         }
128 |         this._pond.destroy();
129 |     };
130 |     FilePond.decorators = [
131 |         { type: Component, args: [{
132 |                     selector: 'FilePond',
133 |                     template: "\n      <div class=\"filepond--wrapper\">\n        <input type=\"file\" id={{id}} name={{name}} class={{className}} required={{required}} multiple={{allowMultiple}} accept={{acceptedFileTypes}}/>\n      </div>\n    ",
134 |                     encapsulation: ViewEncapsulation.None,
135 |                     inputs: inputs,
136 |                     outputs: outputs
137 |                 },] },
138 |     ];
139 |     /** @nocollapse */
140 |     FilePond.ctorParameters = function () { return [
141 |         { type: ElementRef, },
142 |         { type: NgZone, },
143 |     ]; };
144 |     return FilePond;
145 | }());
146 | export { FilePond };
147 | function FilePond_tsickle_Closure_declarations() {
148 |     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
149 |     FilePond.decorators;
150 |     /**
151 |      * @nocollapse
152 |      * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
153 |      */
154 |     FilePond.ctorParameters;
155 |     /** @type {?} */
156 |     FilePond.prototype._pond;
157 |     /** @type {?} */
158 |     FilePond.prototype._root;
159 |     /** @type {?} */
160 |     FilePond.prototype._element;
161 |     /** @type {?} */
162 |     FilePond.prototype._options;
163 |     /** @type {?} */
164 |     FilePond.prototype._ngZone;
165 | }
166 | export { ɵ0 };
167 | //# sourceMappingURL=filepond.component.js.map


--------------------------------------------------------------------------------
/dist/component/filepond.component.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"filepond.component.js","sourceRoot":"","sources":["../../src/component/filepond.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    EventEmitter,\n    ViewEncapsulation,\n    ElementRef,\n    SimpleChanges,\n    NgZone\n} from '@angular/core';\n\nimport {\n    OptionTypes,\n    create,\n    supported,\n    registerPlugin as register\n} from 'filepond';\n\n// Do this once\nconst isSupported: boolean = supported();\n\n// Methods not made available to the component\nconst filteredComponentMethods: Array<string> = [\n    'setOptions',\n    'on',\n    'off',\n    'onOnce',\n    'appendTo',\n    'insertAfter',\n    'insertBefore',\n    'isAttachedTo',\n    'replaceElement',\n    'restoreElement',\n    'destroy'\n];\n\n// All the properties that can be bound\nconst inputs: Array<any> = [];\n\n// All the events that need to be mapped to emitters\nconst outputs: Array<any> = [];\n\nconst update = () => {\n    inputs.length = 0;\n    outputs.length = 0;\n    for (const prop in OptionTypes) {\n        // don't add events to the props array\n        if (/^on/.test(prop)) {\n            outputs.push(prop);\n            continue;\n        }\n\n        // get property type\n        inputs.push(prop);\n    }\n};\n\n// get initial inputs and outputs\nupdate();\n\nexport const registerPlugin = (...args: Array<any>) => {\n\n    // register plugin\n    register(...args);\n\n    // update props\n    update();\n};\n\n@Component({\n    selector: 'FilePond',\n    template: `\n      <div class=\"filepond--wrapper\">\n        <input type=\"file\" id={{id}} name={{name}} class={{className}} required={{required}} multiple={{allowMultiple}} accept={{acceptedFileTypes}}/>\n      </div>\n    `,\n    encapsulation: ViewEncapsulation.None,\n    inputs,\n    outputs\n})\n\nexport class FilePond {\n\n    private _pond: any;\n    private _root: any;\n    private _element: any;\n    private _options: any;\n\n    constructor(_root: ElementRef, private _ngZone: NgZone) {\n        this._root = _root;\n\n        // init with empty options object\n        this._options = {};\n\n        // Programmatically create event emitters for output properties\n        outputs.forEach(output => {\n            this[output] = new EventEmitter();\n        });\n\n    }\n\n    ngAfterViewInit() {\n\n        this._element = this._root.nativeElement.querySelector('input');\n\n        // Map FilePond callback methods to Angular $emitters\n        const emitters = outputs.reduce((obj, output) => {\n            obj[output] = (...args: Array<any>) => {\n                this[output].emit(output, ...args);\n            };\n            return obj;\n        }, {});\n\n        // will block angular from listening to events inside the pond\n        this._ngZone.runOutsideAngular(() => {\n            this._pond = create(this._element, Object.assign(this._options, emitters));\n        });\n\n        // Copy instance method references to component instance\n        Object.keys(this._pond)\n            .filter(key => !filteredComponentMethods.includes(key))\n            .forEach(key => {\n                this[key] = this._pond[key];\n            });\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        for (const key in this) {\n            if (!inputs.includes(key)) { continue; }\n            this._options[key] = this[key];\n        }\n        if (!this._pond) {\n            return;\n        }\n        this._pond.setOptions(this._options);\n    }\n\n    ngOnDestroy() {\n        if (!this._pond) {\n            return;\n        }\n        this._pond.destroy();\n    }\n\n}"]}


--------------------------------------------------------------------------------
/dist/component/filepond.component.metadata.json:
--------------------------------------------------------------------------------
1 | [{"__symbolic":"module","version":4,"metadata":{"ɵ0":{"__symbolic":"error","message":"Lambda not supported","line":40,"character":15},"registerPlugin":{"__symbolic":"error","message":"Lambda not supported","line":58,"character":30},"FilePond":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":67,"character":1},"arguments":[{"selector":"FilePond","template":"\n      <div class=\"filepond--wrapper\">\n        <input type=\"file\" id={{id}} name={{name}} class={{className}} required={{required}} multiple={{allowMultiple}} accept={{acceptedFileTypes}}/>\n      </div>\n    ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":74,"character":19},"member":"None"},"inputs":[],"outputs":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":86,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":86,"character":52}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "angular-filepond",
 3 |     "version": "1.0.5",
 4 |     "description": "A handy FilePond adapter component for Angular",
 5 |     "homepage": "https://pqina.nl/filepond",
 6 |     "license": "MIT",
 7 |     "main": "dist/angular-filepond.module.js",
 8 |     "keywords": [
 9 |         "angular",
10 |         "angularjs",
11 |         "ngx",
12 |         "filepond",
13 |         "file",
14 |         "upload",
15 |         "drag",
16 |         "drop",
17 |         "browse",
18 |         "image",
19 |         "preview"
20 |     ],
21 |     "author": {
22 |         "name": "PQINA",
23 |         "url": "https://pqina.nl"
24 |     },
25 |     "repository": {
26 |         "type": "git",
27 |         "url": "https://github.com/pqina/angular-filepond.git"
28 |     },
29 |     "scripts": {
30 |         "build": "ngc -p src/tsconfig.json",
31 |         "prepare": "npm run build"
32 |     },
33 |     "dependencies": {
34 |         "filepond": "^1.2.7"
35 |     },
36 |     "peerDependencies": {
37 |         "@angular/core": "^5.2.9",
38 |         "typescript": "^2.8.1",
39 |         "zone.js": "^0.8.25"
40 |     },
41 |     "devDependencies": {
42 |         "@angular/compiler": "^5.2.9",
43 |         "@angular/compiler-cli": "^5.2.9",
44 |         "@angular/core": "^5.2.9",
45 |         "rollup": "^0.57.1",
46 |         "rxjs": "^5.5.8",
47 |         "typescript": "^2.8.1",
48 |         "zone.js": "^0.8.25"
49 |     }
50 | }


--------------------------------------------------------------------------------
/src/angular-filepond.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | 
 3 | import { FilePond } from './component/filepond.component';
 4 | export * from './component/filepond.component';
 5 | 
 6 | @NgModule({
 7 |     declarations: [FilePond],
 8 |     exports: [FilePond],
 9 |     providers: []
10 | })
11 | 
12 | export class FilePondModule { }


--------------------------------------------------------------------------------
/src/component/filepond.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |     Component,
  3 |     EventEmitter,
  4 |     ViewEncapsulation,
  5 |     ElementRef,
  6 |     SimpleChanges,
  7 |     NgZone
  8 | } from '@angular/core';
  9 | 
 10 | import {
 11 |     OptionTypes,
 12 |     create,
 13 |     supported,
 14 |     registerPlugin as register
 15 | } from 'filepond';
 16 | 
 17 | // Do this once
 18 | const isSupported: boolean = supported();
 19 | 
 20 | // Methods not made available to the component
 21 | const filteredComponentMethods: Array<string> = [
 22 |     'setOptions',
 23 |     'on',
 24 |     'off',
 25 |     'onOnce',
 26 |     'appendTo',
 27 |     'insertAfter',
 28 |     'insertBefore',
 29 |     'isAttachedTo',
 30 |     'replaceElement',
 31 |     'restoreElement',
 32 |     'destroy'
 33 | ];
 34 | 
 35 | // All the properties that can be bound
 36 | const inputs: Array<any> = [];
 37 | 
 38 | // All the events that need to be mapped to emitters
 39 | const outputs: Array<any> = [];
 40 | 
 41 | const update = () => {
 42 |     inputs.length = 0;
 43 |     outputs.length = 0;
 44 |     for (const prop in OptionTypes) {
 45 |         // don't add events to the props array
 46 |         if (/^on/.test(prop)) {
 47 |             outputs.push(prop);
 48 |             continue;
 49 |         }
 50 | 
 51 |         // get property type
 52 |         inputs.push(prop);
 53 |     }
 54 | };
 55 | 
 56 | // get initial inputs and outputs
 57 | update();
 58 | 
 59 | export const registerPlugin = (...args: Array<any>) => {
 60 | 
 61 |     // register plugin
 62 |     register(...args);
 63 | 
 64 |     // update props
 65 |     update();
 66 | };
 67 | 
 68 | @Component({
 69 |     selector: 'FilePond',
 70 |     template: `
 71 |       <div class="filepond--wrapper">
 72 |         <input type="file" id={{id}} name={{name}} class={{className}} required={{required}} multiple={{allowMultiple}} accept={{acceptedFileTypes}}/>
 73 |       </div>
 74 |     `,
 75 |     encapsulation: ViewEncapsulation.None,
 76 |     inputs,
 77 |     outputs
 78 | })
 79 | 
 80 | export class FilePond {
 81 | 
 82 |     private _pond: any;
 83 |     private _root: any;
 84 |     private _element: any;
 85 |     private _options: any;
 86 | 
 87 |     constructor(_root: ElementRef, private _ngZone: NgZone) {
 88 |         this._root = _root;
 89 | 
 90 |         // init with empty options object
 91 |         this._options = {};
 92 | 
 93 |         // Programmatically create event emitters for output properties
 94 |         outputs.forEach(output => {
 95 |             this[output] = new EventEmitter();
 96 |         });
 97 | 
 98 |     }
 99 | 
100 |     ngAfterViewInit() {
101 | 
102 |         this._element = this._root.nativeElement.querySelector('input');
103 | 
104 |         // Map FilePond callback methods to Angular $emitters
105 |         const emitters = outputs.reduce((obj, output) => {
106 |             obj[output] = (...args: Array<any>) => {
107 |                 this[output].emit(output, ...args);
108 |             };
109 |             return obj;
110 |         }, {});
111 | 
112 |         // will block angular from listening to events inside the pond
113 |         this._ngZone.runOutsideAngular(() => {
114 |             this._pond = create(this._element, Object.assign(this._options, emitters));
115 |         });
116 | 
117 |         // Copy instance method references to component instance
118 |         Object.keys(this._pond)
119 |             .filter(key => !filteredComponentMethods.includes(key))
120 |             .forEach(key => {
121 |                 this[key] = this._pond[key];
122 |             });
123 |     }
124 | 
125 |     ngOnChanges(changes: SimpleChanges) {
126 |         for (const key in this) {
127 |             if (!inputs.includes(key)) { continue; }
128 |             this._options[key] = this[key];
129 |         }
130 |         if (!this._pond) {
131 |             return;
132 |         }
133 |         this._pond.setOptions(this._options);
134 |     }
135 | 
136 |     ngOnDestroy() {
137 |         if (!this._pond) {
138 |             return;
139 |         }
140 |         this._pond.destroy();
141 |     }
142 | 
143 | }


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { FilePond } from './component/filepond.component';
2 | export { FilePondModule } from './angular-filepond.module';


--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /*
 2 | {
 3 |     "compilerOptions": {
 4 |         "baseUrl": ".",
 5 |         "rootDir": ".",
 6 |         "outDir": "../dist",
 7 |         "module": "es2015",
 8 |         "target": "es5",
 9 |         "moduleResolution": "node",
10 |         "sourceMap": true,
11 |         "inlineSources": true,
12 |         "declaration": true,
13 |         "stripInternal": true,
14 |         "emitDecoratorMetadata": true,
15 |         "experimentalDecorators": true,
16 |         "noImplicitAny": false,
17 |         "suppressImplicitAnyIndexErrors": true,
18 |         "lib": [
19 |             "es2017",
20 |             "dom"
21 |         ]
22 |     },
23 |     "files": [
24 |         "../typings/filepond.d.ts",
25 |         "index.ts"
26 |     ],
27 |     "angularCompilerOptions": {
28 |         "skipMetadataEmit": false,
29 |         "skipTemplateCodegen": true,
30 |         "annotateForClosureCompiler": true,
31 |         "flatModuleOutFile": "angular-filepond.js",
32 |         "flatModuleId": "angular-filepond"
33 |     }
34 | }
35 | */
36 | {
37 |     "compilerOptions": {
38 |         "baseUrl": ".",
39 |         "declaration": true,
40 |         "emitDecoratorMetadata": true,
41 |         "experimentalDecorators": true,
42 |         "inlineSources": true,
43 |         "lib": [
44 |             "es2017",
45 |             "dom"
46 |         ],
47 |         "module": "es2015",
48 |         "moduleResolution": "node",
49 |         "outDir": "../dist",
50 |         "rootDir": ".",
51 |         "skipLibCheck": true,
52 |         "sourceMap": true,
53 |         "strict": false,
54 |         "target": "es5"
55 |     },
56 |     "files": [
57 |         "angular-filepond.module.ts"
58 |     ],
59 |     "angularCompilerOptions": {
60 |         "annotateForClosureCompiler": true,
61 |         "skipTemplateCodegen": true,
62 |         "strictMetadataEmit": true
63 |     }
64 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "module": "es2015",
 4 |         "target": "es5",
 5 |         "moduleResolution": "node",
 6 |         "sourceMap": true,
 7 |         "inlineSources": true,
 8 |         "declaration": true,
 9 |         "stripInternal": true,
10 |         "emitDecoratorMetadata": true,
11 |         "experimentalDecorators": true,
12 |         "noImplicitAny": false,
13 |         "suppressImplicitAnyIndexErrors": true,
14 |         "outDir": "build",
15 |         "rootDir": "src",
16 |         "lib": [
17 |             "es2017",
18 |             "dom"
19 |         ]
20 |     },
21 |     "files": [
22 |         "typings/filepond.d.ts",
23 |         "src/index.ts"
24 |     ],
25 |     "angularCompilerOptions": {
26 |         "skipMetadataEmit": false,
27 |         "skipTemplateCodegen": true,
28 |         "annotateForClosureCompiler": true,
29 |         "flatModuleOutFile": "angular-filepond.js",
30 |         "flatModuleId": "angular-filepond"
31 |     }
32 | }


--------------------------------------------------------------------------------
/typings/filepond.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'filepond';


--------------------------------------------------------------------------------