Full Code of pqina/ngx-filepond for AI

Repository: pqina/ngx-filepond
Branch: master
Commit: 3477175ee128
Files: 30
Total size: 30.1 KB

Directory structure:
gitextract_x7598i5z/

├── .editorconfig
├── .github/
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug_report.yml
│   │   ├── config.yml
│   │   └── feature_request.yml
│   └── ISSUE_TEMPLATE.md
├── .gitignore
├── .nvmrc
├── LICENSE
├── README.md
├── angular.json
├── browserslist
├── e2e/
│   ├── protractor.conf.js
│   ├── src/
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.e2e.json
├── package.json
├── projects/
│   └── ngx-filepond/
│       ├── README.md
│       ├── ng-package.json
│       ├── package.json
│       ├── src/
│       │   ├── lib/
│       │   │   ├── ngx-filepond.component.css
│       │   │   ├── ngx-filepond.component.html
│       │   │   ├── ngx-filepond.component.spec.ts
│       │   │   ├── ngx-filepond.component.ts
│       │   │   └── ngx-filepond.module.ts
│       │   └── public-api.ts
│       ├── tsconfig.lib.json
│       ├── tsconfig.lib.prod.json
│       └── tsconfig.spec.json
├── tsconfig.json
└── tslint.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
# Editor configuration, see http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false


================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.yml
================================================
name: Bug report
title: "[Bug] "
description: Report an issue with Angular FilePond
labels: bug
body:
  - type: markdown
    attributes:
      value: |
        Thanks for taking the time to fill out this bug report!
  - type: checkboxes
    attributes:
      label: Is there an existing issue for this?
      description: Please search to see if an issue already exists for the bug you encountered.
      options:
      - label: I have searched the existing issues
        required: true
  - type: checkboxes
    attributes:
      label: Have you updated Angular FilePond, FilePond, and all plugins?
      description: Please update Angular FilePond, FilePond, and all plugins to the most recent version.
      options:
      - label: I have updated FilePond and its plugins
        required: true
  - type: textarea
    attributes:
      label: Describe the bug
      description: A concise description of what the bug is.
      placeholder: Bug description
    validations:
      required: true
  - type: textarea
    attributes:
      label: Reproduction
      description: Provide clear steps to reproduce the bug.
      placeholder: Reproduction
    validations:
      required: true
  - type: textarea
    attributes:
      label: Environment
      description: |
        examples:
          - **Device**: Samsung Galaxy s20, iPhone 12 Mini, Macbook Pro (2020), etc.
          - **OS**: Android 8, iOS 12, Windows 10, etc.
          - **Browser**: Firefox 93, Chrome 94, etc.
          - **Angular version**: Angular 10
      value: |
          - Device:
          - OS:
          - Broser:
          - React version:
      render: markdown
    validations:
      required: true


================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
  - name: Stack Overflow
    url: https://stackoverflow.com/questions/tagged/filepond
    about: Ask questions on Stack Overflow and tag with "filepond"


================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.yml
================================================
name: Feature request
title: "[Feature] "
description: Suggest an idea for this project
labels: feature
body:
  - type: markdown
    attributes:
      value: |
        Thanks for taking the time to fill out this feature request!
  - type: checkboxes
    attributes:
      label: Is there an existing issue for this?
      description: Please search to see if an issue already exists for the feature request you want to submit.
      options:
      - label: I have searched the existing issues
        required: true
  - type: textarea
    attributes:
      label: Is your feature request related to a problem? Please describe.
      description: A clear and concise description of what the problem is you want to solve.
      placeholder: I'm always frustrated when...
    validations:
      required: true
  - type: textarea
    attributes:
      label: Describe the solution you'd like
      description: A clear and concise description of what you want to happen.
    validations:
      required: true
  - type: textarea
    attributes:
      label: Describe alternatives you've considered
      description: A clear and concise description of any alternative solutions or features you've considered.
    validations:
      required: true


================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
Hello fellow developer!

💡 If you want to submit a feature request, go right ahead!

🐜 If you've found a bug, please use the template below to report it.


**The more details you provide, the more inclined other developers are to help you and the faster the problem is resolved.**


If you think the issue is related FilePond itself and not the Angular framework or adapter, please submit the issue in the FilePond repository.

Please format code snippets using backticks and don't forget to set the appropriate language.
https://help.github.com/articles/creating-and-highlighting-code-blocks/


### Summary



### How to reproduce



### Expected behaviour



### Additional information


| Environment  | Version
|------------- | -----------
| OS           | MacOS / Windows / iOS / Linux / ...
| Device       | iPhone SE / Galaxy Note 9 / ...
| Browser      | Safari 11.1.1 / Edge 15 / ...


================================================
FILE: .gitignore
================================================
# See http://help.github.com/ignore-files/ for more about ignoring files.


# compiled output
/.ng_pkg_build
/dist
/tmp
/out-tsc
dist.tgz

# dependencies
/node_modules

# IDEs and editors
.angular
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db


================================================
FILE: .nvmrc
================================================
v16.14.0


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2018 PQINA | Rik Schennink <rik@pqina.nl>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# Angular FilePond

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.

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/ngx-filepond/blob/master/LICENSE)
[![npm version](https://badge.fury.io/js/ngx-filepond.svg)](https://www.npmjs.com/package/ngx-filepond)
![npm](https://img.shields.io/npm/dt/ngx-filepond)
![npm peer dependency version](https://img.shields.io/npm/dependency-version/ngx-filepond/peer/@angular/core)
[![Discord](https://img.shields.io/discord/1422126182924554291?label=discord)](https://discord.gg/KTyymsrTrX)

[Documentation](https://pqina.nl/filepond/docs) • [Discord](https://discord.gg/KTyymsrTrX) • [Example project](https://stackblitz.com/github/pqina/pintura-example-angular?file=src%2Fapp%2Ffilepond-example%2Ffilepond-example.component.ts)

---

[<img src="https://github.com/pqina/filepond-github-assets/blob/master/header.svg" alt="FilePond"/>](https://www.buymeacoffee.com/rikschennink/)

[Buy me a Coffee](https://www.buymeacoffee.com/rikschennink/) • [Use FilePond with Pintura](https://pqina.nl/pintura/?ref=github-filepond) • [Dev updates](https://rik.schenn.ink/)

---

### Core Features

- Accepts **directories**, **files**, blobs, local URLs, **remote URLs** and Data URIs.
- **Drop files**, select on filesystem, **copy and paste files**, or add files using the API.
- **Async uploading** with AJAX, or encode files as base64 data and send along form post.
- **Accessible**, tested with AT software like VoiceOver and JAWS, **navigable by Keyboard**.
- **Image optimization**, automatic image resizing, **cropping**, and **fixes EXIF orientation**.
- **Responsive**, automatically scales to available space, is functional on both **mobile and desktop devices**.

[Learn more about FilePond](https://pqina.nl/filepond/)

<img src="https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif?raw=true" width="370" alt=""/>

---

### Also need Image Editing?

**Pintura the modern JavaScript Image Editor** is what you're looking for. Pintura supports setting **crop aspect ratios**, **resizing**, **rotating**, **cropping**, and **flipping** images. Above all, it integrates beautifully with FilePond.

[Learn more about Pintura](https://pqina.nl/pintura/?ref=github-angular-filepond)

<img src="https://github.com/pqina/filepond-github-assets/blob/master/filepond_pintura.gif?raw=true" width="600" alt=""/>

## Installation

Install FilePond component from npm.

```bash
npm install filepond ngx-filepond --save
```

Import `FilePondModule` and if needed register any plugins. Please note that plugins need to be [installed from npm](https://pqina.nl/filepond/docs/patterns/plugins/introduction/#installing-plugins) separately.

Add FilePond styles path `./node_modules/filepond/dist/filepond.min.css` to the `build.options.styles` property in `angular.json`

[Setting up FilePond with Angular 13](https://github.com/pqina/ngx-filepond/issues/70#issuecomment-1273741734)

```ts
// app.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";

// import filepond module
import { FilePondModule, registerPlugin } from "ngx-filepond";

// import and register filepond file type validation plugin
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";

registerPlugin(FilePondPluginFileValidateType);

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FilePondModule, // add filepond module here
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

```html
<!-- app.component.html -->
<file-pond
  #myPond
  [options]="pondOptions"
  [files]="pondFiles"
  (oninit)="pondHandleInit()"
  (onaddfile)="pondHandleAddFile($event)"
  (onactivatefile)="pondHandleActivateFile($event)"
>
</file-pond>
```

```ts
// app.component.ts
import { Component, ViewChild } from "@angular/core";
import { FilePondComponent } from "ngx-filepond";
import { FilePondOptions } from "filepond";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild("myPond") myPond: FilePondComponent;

  pondOptions: FilePondOptions = {
    allowMultiple: true,
    labelIdle: "Drop files here...",
  };

  pondFiles: FilePondOptions["files"] = [
    {
      source: "assets/photo.jpeg",
      options: {
        type: "local",
      },
    },
  ];

  pondHandleInit() {
    console.log("FilePond has initialised", this.myPond);
  }

  pondHandleAddFile(event: any) {
    console.log("A file was added", event);
  }

  pondHandleActivateFile(event: any) {
    console.log("A file was activated", event);
  }
}
```

## How to run project

Run `npm run packagr` to generate package in dist.

Run `npm pack` in dist folder to generate `.tgz` file.

Run `npm install` in project folder.

## How to fix import errors

If you get a `"types/index" has no default export` error, you can either rewrite the import:

```js
import * as FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
```

Or add these 2 lines to your `tsconfig.json` file:

```json
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}
```

[Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/angular/)


================================================
FILE: angular.json
================================================
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ngx-filepond": {
      "projectType": "library",
      "root": "projects/ngx-filepond",
      "sourceRoot": "projects/ngx-filepond/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/ngx-filepond/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/ngx-filepond/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/ngx-filepond/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "tsConfig": "projects/ngx-filepond/tsconfig.spec.json",
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ]
          }
        }
      }
    }
  }
}


================================================
FILE: browserslist
================================================
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
> 0.5%
last 2 versions
Firefox ESR
not dead
# IE 9-11

================================================
FILE: e2e/protractor.conf.js
================================================
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.e2e.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

================================================
FILE: e2e/src/app.e2e-spec.ts
================================================
import { AppPage } from './app.po';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('Welcome to app!');
  });
});


================================================
FILE: e2e/src/app.po.ts
================================================
import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo() {
    return browser.get('/');
  }

  getParagraphText() {
    return element(by.css('app-root h1')).getText();
  }
}


================================================
FILE: e2e/tsconfig.e2e.json
================================================
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

================================================
FILE: package.json
================================================
{
  "name": "filepond-angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "filepond": "^4.30.4",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.1",
    "@angular/cli": "~15.2.1",
    "@angular/compiler-cli": "^15.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ng-packagr": "^15.2.2",
    "typescript": "~4.9.4"
  }
}


================================================
FILE: projects/ngx-filepond/README.md
================================================
# Angular FilePond

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.

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/ngx-filepond/blob/master/LICENSE)
[![npm version](https://badge.fury.io/js/ngx-filepond.svg)](https://www.npmjs.com/package/ngx-filepond)
[![Donate with PayPal](https://img.shields.io/badge/donate-PayPal.me-pink.svg)](https://www.paypal.me/rikschennink/10)

<img src="https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif?raw=true" width="370" alt=""/>

## Installation

Install FilePond component from npm.

```bash
npm install filepond ngx-filepond --save
```

Import `FilePondModule` and if needed register any plugins. Please note that plugins need to be [installed from npm](https://pqina.nl/filepond/docs/patterns/plugins/introduction/#installing-plugins) separately.

Add FilePond styles path `./node_modules/filepond/dist/filepond.min.css` to the `build.options.styles` property in `angular.json`

```ts
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// import filepond module
import { FilePondModule, registerPlugin } from 'ngx-filepond';

// import and register filepond file type validation plugin
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
registerPlugin(FilePondPluginFileValidateType);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FilePondModule // add filepond module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

```html
<!-- app.component.html -->
<file-pond #myPond 
    [options]="pondOptions" 
    [files]="pondFiles"
    (oninit)="pondHandleInit()"
    (onaddfile)="pondHandleAddFile($event)"
    (onactivatefile)="pondHandleActivateFile($event)">
</file-pond>
```

```ts
// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { FilePondComponent } from 'ngx-filepond';
import { FilePondOptions } from 'filepond';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  @ViewChild('myPond') myPond: FilePondComponent

  pondOptions: FilePondOptions = {
    allowMultiple: true,
    labelIdle: 'Drop files here...'   
  }

  pondFiles: FilePondOptions["files"] = [
    {
      source: 'assets/photo.jpeg',
      options: {
        type: 'local'
      }
    }
  ]

  pondHandleInit() {
    console.log('FilePond has initialised', this.myPond);
  }

  pondHandleAddFile(event: any) {
    console.log('A file was added', event);
  }

  pondHandleActivateFile(event: any) {
    console.log('A file was activated', event)
  }

}

```

[Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/angular/)


================================================
FILE: projects/ngx-filepond/ng-package.json
================================================
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "allowedNonPeerDependencies": ["filepond"],
  "dest": "../../dist/ngx-filepond",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}


================================================
FILE: projects/ngx-filepond/package.json
================================================
{
  "name": "ngx-filepond",
  "version": "7.0.3",
  "description": "A handy FilePond adapter component for Angular",
  "homepage": "https://pqina.nl/filepond",
  "license": "MIT",
  "author": {
    "name": "PQINA",
    "url": "https://pqina.nl"
  },
  "keywords": [
    "angular",
    "angularjs",
    "ngx",
    "filepond",
    "file",
    "upload",
    "drag",
    "drop",
    "browse",
    "image",
    "preview"
  ],
  "peerDependencies": {
    "@angular/common": ">=14.x",
    "@angular/core": ">=14.x",
    "filepond": ">=4.19.1 <5.x"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "sideEffects": false
}


================================================
FILE: projects/ngx-filepond/src/lib/ngx-filepond.component.css
================================================


================================================
FILE: projects/ngx-filepond/src/lib/ngx-filepond.component.html
================================================
<div class="filepond--wrapper">
  <input type="file"/>
</div>

================================================
FILE: projects/ngx-filepond/src/lib/ngx-filepond.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { FilePondComponent } from './ngx-filepond.component';

describe('FilePondComponent', () => {
  let component: FilePondComponent;
  let fixture: ComponentFixture<FilePondComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FilePondComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(FilePondComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: projects/ngx-filepond/src/lib/ngx-filepond.component.ts
================================================
import {
  Component,
  ElementRef,
  SimpleChanges,
  ViewEncapsulation,
  EventEmitter,
  NgZone,
  Input,
  Output,
  AfterViewInit,
  OnChanges,
  OnDestroy,
} from "@angular/core";

import { create, supported, FilePond, FilePondOptions } from "filepond";

// We test if filepond is supported on the current client
const isSupported: Boolean = supported();

// List of attributes for fallback input
const inputAttributes: Array<string> = [
  "id",
  "name",
  "class",
  "multiple",
  "required",
  "disabled",
  "capture",
  "accept",
];

// Methods not made available on the component
const filteredComponentMethods: Array<string> = [
  "setOptions",
  "on",
  "off",
  "onOnce",
  "appendTo",
  "insertAfter",
  "insertBefore",
  "isAttachedTo",
  "replaceElement",
  "restoreElement",
  "destroy",
];

const outputs: Array<string> = [
  "oninit",
  "onwarning",
  "onerror",
  "oninitfile",
  "onaddfilestart",
  "onaddfileprogress",
  "onaddfile",
  "onprocessfilestart",
  "onprocessfileprogress",
  "onprocessfileabort",
  "onprocessfilerevert",
  "onprocessfile",
  "onprocessfiles",
  "onremovefile",
  "onpreparefile",
  "onupdatefiles",
  "onactivatefile",
  "onreorderfiles",
];

// Component outline
@Component({
  selector: "file-pond",
  encapsulation: ViewEncapsulation.None,
  templateUrl: "./ngx-filepond.component.html",
  styleUrls: ["./ngx-filepond.component.css"],
})
export class FilePondComponent implements AfterViewInit, OnChanges, OnDestroy {
  @Input()
  options: FilePondOptions | any = {};

  @Input()
  files: FilePondOptions["files"];

  // same as outputs array
  @Output() oninit = new EventEmitter<any>();
  @Output() onwarning = new EventEmitter<any>();
  @Output() onerror = new EventEmitter<any>();
  @Output() oninitfile = new EventEmitter<any>();
  @Output() onactivatefile = new EventEmitter<any>();
  @Output() onaddfilestart = new EventEmitter<any>();
  @Output() onaddfileprogress = new EventEmitter<any>();
  @Output() onaddfile = new EventEmitter<any>();
  @Output() onprocessfilestart = new EventEmitter<any>();
  @Output() onprocessfileprogress = new EventEmitter<any>();
  @Output() onprocessfileabort = new EventEmitter<any>();
  @Output() onprocessfilerevert = new EventEmitter<any>();
  @Output() onprocessfile = new EventEmitter<any>();
  @Output() onprocessfiles = new EventEmitter<any>();
  @Output() onremovefile = new EventEmitter<any>();
  @Output() onpreparefile = new EventEmitter<any>();
  @Output() onupdatefiles = new EventEmitter<any>();
  @Output() onreorderfiles = new EventEmitter<any>();

  private root: ElementRef;
  private zone: NgZone;
  private pond: FilePond | null = null;
  private handleEvent: Function | null = null;

  constructor(root: ElementRef, zone: NgZone) {
    this.root = root;
    this.zone = zone;
  }

  ngAfterViewInit() {
    const input = this.root.nativeElement.querySelector("input");

    // transfer relevant attributes to input, this so we still have an input with the correct attributes should file pond not load
    const attributes = this.root.nativeElement.attributes;
    inputAttributes.forEach((name) => {
      const value = attributes[name]
        ? attributes[name].value
        : this.options[name];
      if (!value) {
        return;
      }
      input.setAttribute(name, value);
    });

    // no sufficient features supported in this browser
    if (!isSupported) {
      return;
    }

    // map FilePond events to Angular @outputs
    this.handleEvent = (e: Event) => {
      const key = `on${e.type.split(":")[1]}`;
      // @ts-ignore
      this[key].emit({ ...e.detail });
    };
    outputs.forEach((event) => {
      this.root.nativeElement.addEventListener(
        `FilePond:${event.substring(2)}`,
        this.handleEvent
      );
    });

    // will block angular from listening to events inside the pond
    this.zone.runOutsideAngular(() => {
      // create instance
      this.pond = create(input, {
        // our options
        ...this.options,

        // our initial files
        files: this.files,
      });
    });

    // Copy instance method references to component instance
    this.pond &&
      Object.keys(this.pond)

        // remove unwanted methods
        .filter((key) => filteredComponentMethods.indexOf(key) === -1)

        // set method references from the component instance to the pond instance
        .forEach((key) => {
          // @ts-ignore
          this[key] = this.pond[key];
        });
  }

  ngOnChanges(changes: SimpleChanges) {
    // no need to handle first change
    if (changes["firstChange"]) return;

    // no filepond instance available
    if (!this.pond) {
      return;
    }

    // use new options object as base ( or if not available, use current options )
    const options = changes["options"]
      ? changes["options"].currentValue
      : this.options;

    // see if file list has changed
    if (
      changes["files"] &&
      JSON.stringify(changes["files"].previousValue) !==
        JSON.stringify(changes["files"].currentValue)
    ) {
      // file list has changed
      options.files = changes["files"].currentValue;
    }

    // set new options
    this.pond.setOptions(options);
  }

  ngOnDestroy() {
    if (!this.pond) {
      return;
    }

    outputs.forEach((event) => {
      this.root.nativeElement.removeEventListener(
        `FilePond:${event.substring(2)}`,
        this.handleEvent
      );
    });

    this.pond.destroy();
  }
}


================================================
FILE: projects/ngx-filepond/src/lib/ngx-filepond.module.ts
================================================
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FilePondComponent } from './ngx-filepond.component';

export { registerPlugin } from 'filepond';

@NgModule({
  imports: [CommonModule],
  declarations: [FilePondComponent],
  exports: [FilePondComponent],
})
export class FilePondModule {}


================================================
FILE: projects/ngx-filepond/src/public-api.ts
================================================
/*
 * Public API Surface of ngx-filepond
 */

export * from './lib/ngx-filepond.component';
export * from './lib/ngx-filepond.module';


================================================
FILE: projects/ngx-filepond/tsconfig.lib.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "preserveSymlinks": true,
    "outDir": "../../out-tsc/lib",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": []
  },
  "exclude": ["**/*.spec.ts"]
}


================================================
FILE: projects/ngx-filepond/tsconfig.lib.prod.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.lib.json",
  "compilerOptions": {
    "preserveSymlinks": true,
    "declarationMap": false
  },
  "angularCompilerOptions": {
    "compilationMode": "partial"
  }
}


================================================
FILE: projects/ngx-filepond/tsconfig.spec.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/spec",
    "types": [
      "jasmine"
    ]
  },
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}


================================================
FILE: tsconfig.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "strictPropertyInitialization": false,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "paths": {
      "ngx-filepond": ["dist/ngx-filepond"]
    },
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": ["ES2022", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}


================================================
FILE: tslint.json
================================================
{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "arrow-return-shorthand": true,
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "deprecation": {
      "severity": "warn"
    },
    "eofline": true,
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": true,
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      true,
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],
    "no-output-on-prefix": true,
    "no-inputs-metadata-property": true,
    "no-outputs-metadata-property": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true
  }
}