[ { "path": ".editorconfig", "content": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.yml", "content": "name: Bug report\ntitle: \"[Bug] \"\ndescription: Report an issue with Angular FilePond\nlabels: bug\nbody:\n - type: markdown\n attributes:\n value: |\n Thanks for taking the time to fill out this bug report!\n - type: checkboxes\n attributes:\n label: Is there an existing issue for this?\n description: Please search to see if an issue already exists for the bug you encountered.\n options:\n - label: I have searched the existing issues\n required: true\n - type: checkboxes\n attributes:\n label: Have you updated Angular FilePond, FilePond, and all plugins?\n description: Please update Angular FilePond, FilePond, and all plugins to the most recent version.\n options:\n - label: I have updated FilePond and its plugins\n required: true\n - type: textarea\n attributes:\n label: Describe the bug\n description: A concise description of what the bug is.\n placeholder: Bug description\n validations:\n required: true\n - type: textarea\n attributes:\n label: Reproduction\n description: Provide clear steps to reproduce the bug.\n placeholder: Reproduction\n validations:\n required: true\n - type: textarea\n attributes:\n label: Environment\n description: |\n examples:\n - **Device**: Samsung Galaxy s20, iPhone 12 Mini, Macbook Pro (2020), etc.\n - **OS**: Android 8, iOS 12, Windows 10, etc.\n - **Browser**: Firefox 93, Chrome 94, etc.\n - **Angular version**: Angular 10\n value: |\n - Device:\n - OS:\n - Broser:\n - React version:\n render: markdown\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: Stack Overflow\n url: https://stackoverflow.com/questions/tagged/filepond\n about: Ask questions on Stack Overflow and tag with \"filepond\"\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.yml", "content": "name: Feature request\ntitle: \"[Feature] \"\ndescription: Suggest an idea for this project\nlabels: feature\nbody:\n - type: markdown\n attributes:\n value: |\n Thanks for taking the time to fill out this feature request!\n - type: checkboxes\n attributes:\n label: Is there an existing issue for this?\n description: Please search to see if an issue already exists for the feature request you want to submit.\n options:\n - label: I have searched the existing issues\n required: true\n - type: textarea\n attributes:\n label: Is your feature request related to a problem? Please describe.\n description: A clear and concise description of what the problem is you want to solve.\n placeholder: I'm always frustrated when...\n validations:\n required: true\n - type: textarea\n attributes:\n label: Describe the solution you'd like\n description: A clear and concise description of what you want to happen.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Describe alternatives you've considered\n description: A clear and concise description of any alternative solutions or features you've considered.\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "Hello fellow developer!\n\nšŸ’” If you want to submit a feature request, go right ahead!\n\nšŸœ If you've found a bug, please use the template below to report it.\n\n\n**The more details you provide, the more inclined other developers are to help you and the faster the problem is resolved.**\n\n\nIf you think the issue is related FilePond itself and not the Angular framework or adapter, please submit the issue in the FilePond repository.\n\nPlease format code snippets using backticks and don't forget to set the appropriate language.\nhttps://help.github.com/articles/creating-and-highlighting-code-blocks/\n\n\n### Summary\n\n\n\n### How to reproduce\n\n\n\n### Expected behaviour\n\n\n\n### Additional information\n\n\n| Environment | Version\n|------------- | -----------\n| OS | MacOS / Windows / iOS / Linux / ...\n| Device | iPhone SE / Galaxy Note 9 / ...\n| Browser | Safari 11.1.1 / Edge 15 / ...\n" }, { "path": ".gitignore", "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n\n# compiled output\n/.ng_pkg_build\n/dist\n/tmp\n/out-tsc\ndist.tgz\n\n# dependencies\n/node_modules\n\n# IDEs and editors\n.angular\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n\n# misc\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\nyarn-error.log\ntestem.log\n/typings\n\n# System Files\n.DS_Store\nThumbs.db\n" }, { "path": ".nvmrc", "content": "v16.14.0\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2018 PQINA | Rik Schennink \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Angular FilePond\n\nAngular 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.\n\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/ngx-filepond/blob/master/LICENSE)\n[![npm version](https://badge.fury.io/js/ngx-filepond.svg)](https://www.npmjs.com/package/ngx-filepond)\n![npm](https://img.shields.io/npm/dt/ngx-filepond)\n![npm peer dependency version](https://img.shields.io/npm/dependency-version/ngx-filepond/peer/@angular/core)\n[![Discord](https://img.shields.io/discord/1422126182924554291?label=discord)](https://discord.gg/KTyymsrTrX)\n\n[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)\n\n---\n\n[\"FilePond\"/](https://www.buymeacoffee.com/rikschennink/)\n\n[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/)\n\n---\n\n### Core Features\n\n- Accepts **directories**, **files**, blobs, local URLs, **remote URLs** and Data URIs.\n- **Drop files**, select on filesystem, **copy and paste files**, or add files using the API.\n- **Async uploading** with AJAX, or encode files as base64 data and send along form post.\n- **Accessible**, tested with AT software like VoiceOver and JAWS, **navigable by Keyboard**.\n- **Image optimization**, automatic image resizing, **cropping**, and **fixes EXIF orientation**.\n- **Responsive**, automatically scales to available space, is functional on both **mobile and desktop devices**.\n\n[Learn more about FilePond](https://pqina.nl/filepond/)\n\n\"\"/\n\n---\n\n### Also need Image Editing?\n\n**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.\n\n[Learn more about Pintura](https://pqina.nl/pintura/?ref=github-angular-filepond)\n\n\"\"/\n\n## Installation\n\nInstall FilePond component from npm.\n\n```bash\nnpm install filepond ngx-filepond --save\n```\n\nImport `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.\n\nAdd FilePond styles path `./node_modules/filepond/dist/filepond.min.css` to the `build.options.styles` property in `angular.json`\n\n[Setting up FilePond with Angular 13](https://github.com/pqina/ngx-filepond/issues/70#issuecomment-1273741734)\n\n```ts\n// app.module.ts\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { AppComponent } from \"./app.component\";\n\n// import filepond module\nimport { FilePondModule, registerPlugin } from \"ngx-filepond\";\n\n// import and register filepond file type validation plugin\nimport FilePondPluginFileValidateType from \"filepond-plugin-file-validate-type\";\n\nregisterPlugin(FilePondPluginFileValidateType);\n\n@NgModule({\n declarations: [AppComponent],\n imports: [\n BrowserModule,\n FilePondModule, // add filepond module here\n ],\n providers: [],\n bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n```html\n\n\n\n```\n\n```ts\n// app.component.ts\nimport { Component, ViewChild } from \"@angular/core\";\nimport { FilePondComponent } from \"ngx-filepond\";\nimport { FilePondOptions } from \"filepond\";\n\n@Component({\n selector: \"app-root\",\n templateUrl: \"./app.component.html\",\n styleUrls: [\"./app.component.css\"],\n})\nexport class AppComponent {\n @ViewChild(\"myPond\") myPond: FilePondComponent;\n\n pondOptions: FilePondOptions = {\n allowMultiple: true,\n labelIdle: \"Drop files here...\",\n };\n\n pondFiles: FilePondOptions[\"files\"] = [\n {\n source: \"assets/photo.jpeg\",\n options: {\n type: \"local\",\n },\n },\n ];\n\n pondHandleInit() {\n console.log(\"FilePond has initialised\", this.myPond);\n }\n\n pondHandleAddFile(event: any) {\n console.log(\"A file was added\", event);\n }\n\n pondHandleActivateFile(event: any) {\n console.log(\"A file was activated\", event);\n }\n}\n```\n\n## How to run project\n\nRun `npm run packagr` to generate package in dist.\n\nRun `npm pack` in dist folder to generate `.tgz` file.\n\nRun `npm install` in project folder.\n\n## How to fix import errors\n\nIf you get a `\"types/index\" has no default export` error, you can either rewrite the import:\n\n```js\nimport * as FilePondPluginFileValidateType from \"filepond-plugin-file-validate-type\";\n```\n\nOr add these 2 lines to your `tsconfig.json` file:\n\n```json\n{\n \"compilerOptions\": {\n \"allowSyntheticDefaultImports\": true,\n \"esModuleInterop\": true\n }\n}\n```\n\n[Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/angular/)\n" }, { "path": "angular.json", "content": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"ngx-filepond\": {\n \"projectType\": \"library\",\n \"root\": \"projects/ngx-filepond\",\n \"sourceRoot\": \"projects/ngx-filepond/src\",\n \"prefix\": \"lib\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:ng-packagr\",\n \"options\": {\n \"project\": \"projects/ngx-filepond/ng-package.json\"\n },\n \"configurations\": {\n \"production\": {\n \"tsConfig\": \"projects/ngx-filepond/tsconfig.lib.prod.json\"\n },\n \"development\": {\n \"tsConfig\": \"projects/ngx-filepond/tsconfig.lib.json\"\n }\n },\n \"defaultConfiguration\": \"production\"\n },\n \"test\": {\n \"builder\": \"@angular-devkit/build-angular:karma\",\n \"options\": {\n \"tsConfig\": \"projects/ngx-filepond/tsconfig.spec.json\",\n \"polyfills\": [\n \"zone.js\",\n \"zone.js/testing\"\n ]\n }\n }\n }\n }\n }\n}\n" }, { "path": "browserslist", "content": "# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers\n# For additional information regarding the format and rule options, please see:\n# https://github.com/browserslist/browserslist#queries\n# For IE 9-11 support, please uncomment the last line of the file and adjust as needed\n> 0.5%\nlast 2 versions\nFirefox ESR\nnot dead\n# IE 9-11" }, { "path": "e2e/protractor.conf.js", "content": "// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/blob/master/lib/config.ts\n\nconst { SpecReporter } = require('jasmine-spec-reporter');\n\nexports.config = {\n allScriptsTimeout: 11000,\n specs: [\n './src/**/*.e2e-spec.ts'\n ],\n capabilities: {\n 'browserName': 'chrome'\n },\n directConnect: true,\n baseUrl: 'http://localhost:4200/',\n framework: 'jasmine',\n jasmineNodeOpts: {\n showColors: true,\n defaultTimeoutInterval: 30000,\n print: function() {}\n },\n onPrepare() {\n require('ts-node').register({\n project: require('path').join(__dirname, './tsconfig.e2e.json')\n });\n jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));\n }\n};" }, { "path": "e2e/src/app.e2e-spec.ts", "content": "import { AppPage } from './app.po';\n\ndescribe('workspace-project App', () => {\n let page: AppPage;\n\n beforeEach(() => {\n page = new AppPage();\n });\n\n it('should display welcome message', () => {\n page.navigateTo();\n expect(page.getParagraphText()).toEqual('Welcome to app!');\n });\n});\n" }, { "path": "e2e/src/app.po.ts", "content": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo() {\n return browser.get('/');\n }\n\n getParagraphText() {\n return element(by.css('app-root h1')).getText();\n }\n}\n" }, { "path": "e2e/tsconfig.e2e.json", "content": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/app\",\n \"module\": \"commonjs\",\n \"target\": \"es5\",\n \"types\": [\n \"jasmine\",\n \"jasminewd2\",\n \"node\"\n ]\n }\n}" }, { "path": "package.json", "content": "{\n \"name\": \"filepond-angular\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\",\n \"watch\": \"ng build --watch --configuration development\",\n \"test\": \"ng test\"\n },\n \"private\": true,\n \"dependencies\": {\n \"@angular/animations\": \"^15.2.0\",\n \"@angular/common\": \"^15.2.0\",\n \"@angular/compiler\": \"^15.2.0\",\n \"@angular/core\": \"^15.2.0\",\n \"@angular/forms\": \"^15.2.0\",\n \"@angular/platform-browser\": \"^15.2.0\",\n \"@angular/platform-browser-dynamic\": \"^15.2.0\",\n \"@angular/router\": \"^15.2.0\",\n \"filepond\": \"^4.30.4\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.12.0\"\n },\n \"devDependencies\": {\n \"@angular-devkit/build-angular\": \"^15.2.1\",\n \"@angular/cli\": \"~15.2.1\",\n \"@angular/compiler-cli\": \"^15.2.0\",\n \"@types/jasmine\": \"~4.3.0\",\n \"jasmine-core\": \"~4.5.0\",\n \"karma\": \"~6.4.0\",\n \"karma-chrome-launcher\": \"~3.1.0\",\n \"karma-coverage\": \"~2.2.0\",\n \"karma-jasmine\": \"~5.1.0\",\n \"karma-jasmine-html-reporter\": \"~2.0.0\",\n \"ng-packagr\": \"^15.2.2\",\n \"typescript\": \"~4.9.4\"\n }\n}\n" }, { "path": "projects/ngx-filepond/README.md", "content": "# Angular FilePond\n\nAngular 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.\n\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/ngx-filepond/blob/master/LICENSE)\n[![npm version](https://badge.fury.io/js/ngx-filepond.svg)](https://www.npmjs.com/package/ngx-filepond)\n[![Donate with PayPal](https://img.shields.io/badge/donate-PayPal.me-pink.svg)](https://www.paypal.me/rikschennink/10)\n\n\"\"/\n\n## Installation\n\nInstall FilePond component from npm.\n\n```bash\nnpm install filepond ngx-filepond --save\n```\n\nImport `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.\n\nAdd FilePond styles path `./node_modules/filepond/dist/filepond.min.css` to the `build.options.styles` property in `angular.json`\n\n```ts\n// app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\n\n// import filepond module\nimport { FilePondModule, registerPlugin } from 'ngx-filepond';\n\n// import and register filepond file type validation plugin\nimport FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';\nregisterPlugin(FilePondPluginFileValidateType);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FilePondModule // add filepond module here\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n```html\n\n\n\n```\n\n```ts\n// app.component.ts\nimport { Component, ViewChild } from '@angular/core';\nimport { FilePondComponent } from 'ngx-filepond';\nimport { FilePondOptions } from 'filepond';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.css']\n})\n\nexport class AppComponent {\n\n @ViewChild('myPond') myPond: FilePondComponent\n\n pondOptions: FilePondOptions = {\n allowMultiple: true,\n labelIdle: 'Drop files here...' \n }\n\n pondFiles: FilePondOptions[\"files\"] = [\n {\n source: 'assets/photo.jpeg',\n options: {\n type: 'local'\n }\n }\n ]\n\n pondHandleInit() {\n console.log('FilePond has initialised', this.myPond);\n }\n\n pondHandleAddFile(event: any) {\n console.log('A file was added', event);\n }\n\n pondHandleActivateFile(event: any) {\n console.log('A file was activated', event)\n }\n\n}\n\n```\n\n[Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/angular/)\n" }, { "path": "projects/ngx-filepond/ng-package.json", "content": "{\n \"$schema\": \"../../node_modules/ng-packagr/ng-package.schema.json\",\n \"allowedNonPeerDependencies\": [\"filepond\"],\n \"dest\": \"../../dist/ngx-filepond\",\n \"lib\": {\n \"entryFile\": \"src/public-api.ts\"\n }\n}\n" }, { "path": "projects/ngx-filepond/package.json", "content": "{\n \"name\": \"ngx-filepond\",\n \"version\": \"7.0.3\",\n \"description\": \"A handy FilePond adapter component for Angular\",\n \"homepage\": \"https://pqina.nl/filepond\",\n \"license\": \"MIT\",\n \"author\": {\n \"name\": \"PQINA\",\n \"url\": \"https://pqina.nl\"\n },\n \"keywords\": [\n \"angular\",\n \"angularjs\",\n \"ngx\",\n \"filepond\",\n \"file\",\n \"upload\",\n \"drag\",\n \"drop\",\n \"browse\",\n \"image\",\n \"preview\"\n ],\n \"peerDependencies\": {\n \"@angular/common\": \">=14.x\",\n \"@angular/core\": \">=14.x\",\n \"filepond\": \">=4.19.1 <5.x\"\n },\n \"dependencies\": {\n \"tslib\": \"^2.3.0\"\n },\n \"sideEffects\": false\n}\n" }, { "path": "projects/ngx-filepond/src/lib/ngx-filepond.component.css", "content": "" }, { "path": "projects/ngx-filepond/src/lib/ngx-filepond.component.html", "content": "
\n \n
" }, { "path": "projects/ngx-filepond/src/lib/ngx-filepond.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { FilePondComponent } from './ngx-filepond.component';\n\ndescribe('FilePondComponent', () => {\n let component: FilePondComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [FilePondComponent],\n }).compileComponents();\n\n fixture = TestBed.createComponent(FilePondComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "projects/ngx-filepond/src/lib/ngx-filepond.component.ts", "content": "import {\n Component,\n ElementRef,\n SimpleChanges,\n ViewEncapsulation,\n EventEmitter,\n NgZone,\n Input,\n Output,\n AfterViewInit,\n OnChanges,\n OnDestroy,\n} from \"@angular/core\";\n\nimport { create, supported, FilePond, FilePondOptions } from \"filepond\";\n\n// We test if filepond is supported on the current client\nconst isSupported: Boolean = supported();\n\n// List of attributes for fallback input\nconst inputAttributes: Array = [\n \"id\",\n \"name\",\n \"class\",\n \"multiple\",\n \"required\",\n \"disabled\",\n \"capture\",\n \"accept\",\n];\n\n// Methods not made available on the component\nconst filteredComponentMethods: Array = [\n \"setOptions\",\n \"on\",\n \"off\",\n \"onOnce\",\n \"appendTo\",\n \"insertAfter\",\n \"insertBefore\",\n \"isAttachedTo\",\n \"replaceElement\",\n \"restoreElement\",\n \"destroy\",\n];\n\nconst outputs: Array = [\n \"oninit\",\n \"onwarning\",\n \"onerror\",\n \"oninitfile\",\n \"onaddfilestart\",\n \"onaddfileprogress\",\n \"onaddfile\",\n \"onprocessfilestart\",\n \"onprocessfileprogress\",\n \"onprocessfileabort\",\n \"onprocessfilerevert\",\n \"onprocessfile\",\n \"onprocessfiles\",\n \"onremovefile\",\n \"onpreparefile\",\n \"onupdatefiles\",\n \"onactivatefile\",\n \"onreorderfiles\",\n];\n\n// Component outline\n@Component({\n selector: \"file-pond\",\n encapsulation: ViewEncapsulation.None,\n templateUrl: \"./ngx-filepond.component.html\",\n styleUrls: [\"./ngx-filepond.component.css\"],\n})\nexport class FilePondComponent implements AfterViewInit, OnChanges, OnDestroy {\n @Input()\n options: FilePondOptions | any = {};\n\n @Input()\n files: FilePondOptions[\"files\"];\n\n // same as outputs array\n @Output() oninit = new EventEmitter();\n @Output() onwarning = new EventEmitter();\n @Output() onerror = new EventEmitter();\n @Output() oninitfile = new EventEmitter();\n @Output() onactivatefile = new EventEmitter();\n @Output() onaddfilestart = new EventEmitter();\n @Output() onaddfileprogress = new EventEmitter();\n @Output() onaddfile = new EventEmitter();\n @Output() onprocessfilestart = new EventEmitter();\n @Output() onprocessfileprogress = new EventEmitter();\n @Output() onprocessfileabort = new EventEmitter();\n @Output() onprocessfilerevert = new EventEmitter();\n @Output() onprocessfile = new EventEmitter();\n @Output() onprocessfiles = new EventEmitter();\n @Output() onremovefile = new EventEmitter();\n @Output() onpreparefile = new EventEmitter();\n @Output() onupdatefiles = new EventEmitter();\n @Output() onreorderfiles = new EventEmitter();\n\n private root: ElementRef;\n private zone: NgZone;\n private pond: FilePond | null = null;\n private handleEvent: Function | null = null;\n\n constructor(root: ElementRef, zone: NgZone) {\n this.root = root;\n this.zone = zone;\n }\n\n ngAfterViewInit() {\n const input = this.root.nativeElement.querySelector(\"input\");\n\n // transfer relevant attributes to input, this so we still have an input with the correct attributes should file pond not load\n const attributes = this.root.nativeElement.attributes;\n inputAttributes.forEach((name) => {\n const value = attributes[name]\n ? attributes[name].value\n : this.options[name];\n if (!value) {\n return;\n }\n input.setAttribute(name, value);\n });\n\n // no sufficient features supported in this browser\n if (!isSupported) {\n return;\n }\n\n // map FilePond events to Angular @outputs\n this.handleEvent = (e: Event) => {\n const key = `on${e.type.split(\":\")[1]}`;\n // @ts-ignore\n this[key].emit({ ...e.detail });\n };\n outputs.forEach((event) => {\n this.root.nativeElement.addEventListener(\n `FilePond:${event.substring(2)}`,\n this.handleEvent\n );\n });\n\n // will block angular from listening to events inside the pond\n this.zone.runOutsideAngular(() => {\n // create instance\n this.pond = create(input, {\n // our options\n ...this.options,\n\n // our initial files\n files: this.files,\n });\n });\n\n // Copy instance method references to component instance\n this.pond &&\n Object.keys(this.pond)\n\n // remove unwanted methods\n .filter((key) => filteredComponentMethods.indexOf(key) === -1)\n\n // set method references from the component instance to the pond instance\n .forEach((key) => {\n // @ts-ignore\n this[key] = this.pond[key];\n });\n }\n\n ngOnChanges(changes: SimpleChanges) {\n // no need to handle first change\n if (changes[\"firstChange\"]) return;\n\n // no filepond instance available\n if (!this.pond) {\n return;\n }\n\n // use new options object as base ( or if not available, use current options )\n const options = changes[\"options\"]\n ? changes[\"options\"].currentValue\n : this.options;\n\n // see if file list has changed\n if (\n changes[\"files\"] &&\n JSON.stringify(changes[\"files\"].previousValue) !==\n JSON.stringify(changes[\"files\"].currentValue)\n ) {\n // file list has changed\n options.files = changes[\"files\"].currentValue;\n }\n\n // set new options\n this.pond.setOptions(options);\n }\n\n ngOnDestroy() {\n if (!this.pond) {\n return;\n }\n\n outputs.forEach((event) => {\n this.root.nativeElement.removeEventListener(\n `FilePond:${event.substring(2)}`,\n this.handleEvent\n );\n });\n\n this.pond.destroy();\n }\n}\n" }, { "path": "projects/ngx-filepond/src/lib/ngx-filepond.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { FilePondComponent } from './ngx-filepond.component';\n\nexport { registerPlugin } from 'filepond';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [FilePondComponent],\n exports: [FilePondComponent],\n})\nexport class FilePondModule {}\n" }, { "path": "projects/ngx-filepond/src/public-api.ts", "content": "/*\n * Public API Surface of ngx-filepond\n */\n\nexport * from './lib/ngx-filepond.component';\nexport * from './lib/ngx-filepond.module';\n" }, { "path": "projects/ngx-filepond/tsconfig.lib.json", "content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"preserveSymlinks\": true,\n \"outDir\": \"../../out-tsc/lib\",\n \"declaration\": true,\n \"declarationMap\": true,\n \"inlineSources\": true,\n \"types\": []\n },\n \"exclude\": [\"**/*.spec.ts\"]\n}\n" }, { "path": "projects/ngx-filepond/tsconfig.lib.prod.json", "content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.lib.json\",\n \"compilerOptions\": {\n \"preserveSymlinks\": true,\n \"declarationMap\": false\n },\n \"angularCompilerOptions\": {\n \"compilationMode\": \"partial\"\n }\n}\n" }, { "path": "projects/ngx-filepond/tsconfig.spec.json", "content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../../out-tsc/spec\",\n \"types\": [\n \"jasmine\"\n ]\n },\n \"include\": [\n \"**/*.spec.ts\",\n \"**/*.d.ts\"\n ]\n}\n" }, { "path": "tsconfig.json", "content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"strictPropertyInitialization\": false,\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"forceConsistentCasingInFileNames\": true,\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"sourceMap\": true,\n \"paths\": {\n \"ngx-filepond\": [\"dist/ngx-filepond\"]\n },\n \"declaration\": false,\n \"downlevelIteration\": true,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"node\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\"ES2022\", \"dom\"]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}\n" }, { "path": "tslint.json", "content": "{\n \"rulesDirectory\": [\n \"node_modules/codelyzer\"\n ],\n \"rules\": {\n \"arrow-return-shorthand\": true,\n \"callable-types\": true,\n \"class-name\": true,\n \"comment-format\": [\n true,\n \"check-space\"\n ],\n \"curly\": true,\n \"deprecation\": {\n \"severity\": \"warn\"\n },\n \"eofline\": true,\n \"forin\": true,\n \"import-blacklist\": [\n true,\n \"rxjs/Rx\"\n ],\n \"import-spacing\": true,\n \"indent\": [\n true,\n \"spaces\"\n ],\n \"interface-over-type-literal\": true,\n \"label-position\": true,\n \"max-line-length\": [\n true,\n 140\n ],\n \"member-access\": false,\n \"member-ordering\": [\n true,\n {\n \"order\": [\n \"static-field\",\n \"instance-field\",\n \"static-method\",\n \"instance-method\"\n ]\n }\n ],\n \"no-arg\": true,\n \"no-bitwise\": true,\n \"no-console\": [\n true,\n \"debug\",\n \"info\",\n \"time\",\n \"timeEnd\",\n \"trace\"\n ],\n \"no-construct\": true,\n \"no-debugger\": true,\n \"no-duplicate-super\": true,\n \"no-empty\": false,\n \"no-empty-interface\": true,\n \"no-eval\": true,\n \"no-inferrable-types\": [\n true,\n \"ignore-params\"\n ],\n \"no-misused-new\": true,\n \"no-non-null-assertion\": true,\n \"no-shadowed-variable\": true,\n \"no-string-literal\": false,\n \"no-string-throw\": true,\n \"no-switch-case-fall-through\": true,\n \"no-trailing-whitespace\": true,\n \"no-unnecessary-initializer\": true,\n \"no-unused-expression\": true,\n \"no-use-before-declare\": true,\n \"no-var-keyword\": true,\n \"object-literal-sort-keys\": false,\n \"one-line\": [\n true,\n \"check-open-brace\",\n \"check-catch\",\n \"check-else\",\n \"check-whitespace\"\n ],\n \"prefer-const\": true,\n \"quotemark\": [\n true,\n \"single\"\n ],\n \"radix\": true,\n \"semicolon\": [\n true,\n \"always\"\n ],\n \"triple-equals\": [\n true,\n \"allow-null-check\"\n ],\n \"typedef-whitespace\": [\n true,\n {\n \"call-signature\": \"nospace\",\n \"index-signature\": \"nospace\",\n \"parameter\": \"nospace\",\n \"property-declaration\": \"nospace\",\n \"variable-declaration\": \"nospace\"\n }\n ],\n \"unified-signatures\": true,\n \"variable-name\": false,\n \"whitespace\": [\n true,\n \"check-branch\",\n \"check-decl\",\n \"check-operator\",\n \"check-separator\",\n \"check-type\"\n ],\n \"no-output-on-prefix\": true,\n \"no-inputs-metadata-property\": true,\n \"no-outputs-metadata-property\": true,\n \"no-host-metadata-property\": true,\n \"no-input-rename\": true,\n \"no-output-rename\": true,\n \"use-lifecycle-interface\": true,\n \"use-pipe-transform-interface\": true,\n \"component-class-suffix\": true,\n \"directive-class-suffix\": true\n }\n}\n" } ]