{"id":11617262,"url":"https://github.com/pqina/ngx-filepond","last_synced_at":"2025-06-19T03:49:01.152Z","repository":{"id":32465828,"uuid":"134672158","full_name":"pqina/ngx-filepond","owner":"pqina","description":" 🔌 A handy FilePond adapter component for Angular","archived":false,"fork":false,"pushed_at":"2023-12-28T13:44:55.000Z","size":1840,"stargazers_count":193,"open_issues_count":19,"forks_count":32,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T05:58:54.943Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pqina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-24T06:38:19.000Z","updated_at":"2024-08-20T09:51:25.400Z","dependencies_parsed_at":"2024-08-20T09:51:15.661Z","dependency_job_id":"d3ffd7ee-e83d-45cb-95ef-5797cc3bc1b3","html_url":"https://github.com/pqina/ngx-filepond","commit_stats":{"total_commits":65,"total_committers":4,"mean_commits":16.25,"dds":0.523076923076923,"last_synced_commit":"3560097e136baaf27b5466eab03922126c336964"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pqina%2Fngx-filepond","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pqina%2Fngx-filepond/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pqina%2Fngx-filepond/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pqina%2Fngx-filepond/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pqina","download_url":"https://codeload.github.com/pqina/ngx-filepond/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235227462,"owners_count":18956137,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-06-23T21:37:14.963Z","updated_at":"2025-01-23T04:30:40.151Z","avatar_url":"https://github.com/pqina.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/rikschennink/"],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# 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\n---\n\n[\u003cimg src=\"https://github.com/pqina/filepond-github-assets/blob/master/header.svg\" alt=\"FilePond\"/\u003e](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 on Twitter](https://twitter.com/rikschennink/)\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\u003cimg src=\"https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif?raw=true\" width=\"370\" alt=\"\"/\u003e\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\u003cimg src=\"https://github.com/pqina/filepond-github-assets/blob/master/filepond_pintura.gif?raw=true\" width=\"600\" alt=\"\"/\u003e\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\u003c!-- app.component.html --\u003e\n\u003cfile-pond\n  #myPond\n  [options]=\"pondOptions\"\n  [files]=\"pondFiles\"\n  (oninit)=\"pondHandleInit()\"\n  (onaddfile)=\"pondHandleAddFile($event)\"\n  (onactivatefile)=\"pondHandleActivateFile($event)\"\n\u003e\n\u003c/file-pond\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpqina%2Fngx-filepond","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpqina%2Fngx-filepond","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpqina%2Fngx-filepond/lists"}