{"id":21214784,"url":"https://github.com/filestack/filestack-angular","last_synced_at":"2025-07-10T10:30:39.302Z","repository":{"id":38722216,"uuid":"198799329","full_name":"filestack/filestack-angular","owner":"filestack","description":"An official angular component library for the Filestack","archived":false,"fork":false,"pushed_at":"2024-10-28T06:31:41.000Z","size":910,"stargazers_count":9,"open_issues_count":28,"forks_count":10,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-11-13T17:12:13.274Z","etag":null,"topics":["angular","file-upload","filestack","upload"],"latest_commit_sha":null,"homepage":"","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/filestack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-07-25T09:21:20.000Z","updated_at":"2024-10-24T11:25:01.000Z","dependencies_parsed_at":"2024-04-11T22:24:52.309Z","dependency_job_id":"fa3665f4-2481-4a86-8ac2-57d175e85fa4","html_url":"https://github.com/filestack/filestack-angular","commit_stats":{"total_commits":22,"total_committers":8,"mean_commits":2.75,"dds":0.5,"last_synced_commit":"42b230184a73be226e7ae77b979db26a12a4029b"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filestack%2Ffilestack-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filestack%2Ffilestack-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filestack%2Ffilestack-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filestack%2Ffilestack-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filestack","download_url":"https://codeload.github.com/filestack/filestack-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225632785,"owners_count":17499860,"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":["angular","file-upload","filestack","upload"],"created_at":"2024-11-20T21:30:52.386Z","updated_at":"2024-11-20T21:30:53.235Z","avatar_url":"https://github.com/filestack.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"logo.svg\" align=\"center\" width=\"80\"/\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  filestack-angular\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  Angular component library which allow you to easily integrate powerful filestack-api into your app.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.org/filestack/filestack-angular\"\u003e\n    \u003cimg src=\"https://travis-ci.org/filestack/filestack-angular.svg?branch=master\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@filestack/angular\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@filestack/angular.svg\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/bundlephobia/min/@filestack/angular.svg\" /\u003e\n  \u003cbr\u003e\n  \u003cimg src=\"https://badges.herokuapp.com/browsers?labels=none\u0026googlechrome=latest\u0026firefox=latest\u0026microsoftedge=latest\u0026iexplore=11\u0026safari=latest\u0026iphone=latest\" /\u003e\n\u003c/p\u003e\n\u003chr\u003e\n\n**Table of Contents**\n- [Overview](#overview)\n- [Usage](#usage)\n  - [Installation](#installation)\n  - [CDN](#cdn)\n  - [Available inputs](#available-inputs)\n  - [Available outputs](#available-outputs)\n  - [FilestackService](#filestackservice)\n  - [Examples](#examples)\n    - [Open picker directly after component initialization](#open-picker-directly-after-component-initialization)\n    - [Open picker by clicking the custom button](#open-picker-by-clicking-the-custom-button)\n    - [Open picker in inline mode](#open-picker-in-inline-mode)\n    - [Open picker in drop pane mode](#open-picker-in-drop-pane-mode)\n    - [Get transformed url using filestackTransform pipe](#get-transformed-url-using-filestacktransform-pipe)\n    - [Select file and upload using sdk client.upload()](#select-file-and-upload-using-sdk-clientupload)\n- [Documentation](#documentation)\n- [Development](#development)\n- [Contributing](#contributing)\n\n## Overview\nfilestack-angular is a wrapper on [filestack-js](https://github.com/filestack/filestack-js) sdk which allow you to integrate with Filestack service in just a few lines of code. Almost all you are able to do with [filestack-js](https://filestack.github.io/filestack-js/index.html) you can also do using this component.\n\nThis repository a contains angular workspace with two projects:\n- `filestack-angular` library which contains `FilestackAngularModule` published via npm\n- `example` angular app to show examples of using `FilestackModule` features\n\n`FilestackAngularModule` consists of \n- **FilestackService** - wrapper for a filestack-js client class with added support for an observables\n- **FilestackTransformPipe** - Pipe for easily creating url with [transformations](https://www.filestack.com/docs/api/processing/)  in your template\n- **PickerOverlayComponent** - Filestack picker component that will open in overlay mode\n- **PickerInlineComponent** - Filestack picker component that will open in a provided html container\n- **PickerDropPaneComponent** - Filestack drop pane component that will open in a provided html container\nwhich can be also used independently if needed\n\n## Usage\n### Installation\nInstall it through NPM\n```bash\nnpm install filestack-js\nnpm install @filestack/angular\n```\nInclude ```FilestackModule``` in ```app.module.ts```\n```javascript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\nimport { FilestackModule } from '@filestack/angular';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FilestackModule.forRoot({ apikey: YOUR_APIKEY, options: ClientConfig })\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\nUse in .html file\n```html\n\u003cng-picker-overlay\n  apikey=\"YOUR_API_KEY\"\u003e\n\u003c/ng-picker-overlay\u003e\n```\n### CDN\nThe compiled filestack angular module is also available through our cdn\n```\nhttps://static.filestackapi.com/filestack-angular/{MODULE_VERSION}/filestack-angular.umd.min.js\n```\nand map file to module\n```\nhttps://static.filestackapi.com/filestack-angular/{MODULE_VERSION}/filestack-angular.umd.min.js.map\n```\nwhere {MODULE_VERSION} is desired version of this package\n### Available inputs\n| Name                       | Type                                                                                  | Required                                            | Default  | Description                                                                                             |\n|----------------------------|---------------------------------------------------------------------------------------|-----------------------------------------------------|----------|---------------------------------------------------------------------------------------------------------|\n| apikey                     | String                                                                                | True                                                |          | Filestack api key                                                                                       |\n| options                    | Object                                                                                |                                                     |          | Check [pickerOptions](https://filestack.github.io/filestack-js/interfaces/pickeroptions.html)             |\n| clientOptions.cname        | String                                                                                |                                                     |          | Check [cname](https://filestack.github.io/filestack-js/interfaces/clientoptions.html#cname)               |\n| clientOptions.security     | Object([Security](https://filestack.github.io/filestack-js/interfaces/security.html))   |                                                     |          | Check [security](https://filestack.github.io/filestack-js/interfaces/clientoptions.html#security)         |\n| clientOptions.sessionCache | Boolean                                                                               |                                                     |          | Check [sessionCache](https://filestack.github.io/filestack-js/interfaces/clientoptions.html#sessioncache) |\n| file                        | [InputFile](https://filestack.github.io/filestack-js/globals.html#inputfile)       |     |                                                     |          | Use it to insert a file object for 'upload' action                                                                  |\n| source                     | String                                                                                |                                                     |          | Filestack handle or external url. Use it for 'transform', 'remove', 'metadata' or 'preview' action      |\n\n### Available outputs\n| Name                       | Type                                                                                  | Required | Default  | Description                                                                                                                                        |\n|----------------------------|---------------------------------------------------------------------------------------|----------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------|\n| uploadSuccess              | Subject\u003cPickerResponse\u003e                                                               |          |          | A subject that emits on uploadSuccess event                                                                                                              |\n| uploadError                | Subject\u003cFilestackError\u003e                                                               |          |          | A subject that emits on uploadError event   \n\n### FilestackService\nThe `FilestackService` is an adapter on filestack-js [client class](https://filestack.github.io/filestack-js/classes/client.html)\nand allows you to work with Observables instead of promises. \nMethods get the same input params as client class method.\n\n| method            | return                                                                                    | description                                                                  |\n|-------------------|-------------------------------------------------------------------------------------------|------------------------------------------------------------------------------|\n| init              | void                                                                                      | Init filestack client with your apikey                                        |\n| picker            | [PickerInstance](https://filestack.github.io/filestack-js/interfaces/pickerinstance.html)   | Open or close picker instance                                                |\n| transform         | string                                                                                    | Create a transformation url                                                  |\n| retrieve          | Observable                                                                                | Retrieve an info about a filestack handle                                     |\n| metadata          | Observable                                                                                | Access files via their Filestack handles                                      |\n| storeURL          | Observable                                                                                | Get info about a filestack handle metadata                                    |\n| upload            | Observable                                                                                | Upload a file to the Filestack                                                |\n| remove            | Observable                                                                                | Remove a file from the Filestack                                              |\n| removeMetadata    | Observable                                                                                | Remove a file only from the Filestack system. The file remains in storage.     |\n| preview           | HTMLIFrameElement | Window                                                                | Get preview of uploaded file (need additional addon in your Filestack account)|\n| logout            | Observable                                                                                | Clear cloud session from picker procviders                                   |\n| setClientInstance | [ClientInstance](https://filestack.github.io/filestack-js/classes/client.html)              | Put an existing client instance into filestack service                        |\n\n### Examples\nBelow you can find some basic examples.\n\nYou can also find and try these examples in `angular-filestack-example` app\n\nTo run it locally type\n\n```\nng serve filestack-angular-example\n```\nthen visit\n\n```\nhttp://localhost:4200/\n```\n\n#### Open picker directly after component initialization\n\n`component.ts`\n```typescript\nexport class AppComponent implements OnInit {\n  apikey: string;\n\n  ngOnInit() {\n    this.apikey = 'YOUR_API_KEY';\n  }\n}\n```\n\n`component.html`\n```html\n\u003cng-picker-overlay\n  [apikey]=\"apikey\"\u003e\n\u003c/ng-picker-overlay\u003e\n```\n\n#### Open picker by clicking the custom button\n\n`component.ts`\n```typescript\nexport class AppComponent implements OnInit {\n  apikey: string;\n\n  ngOnInit() {\n    this.apikey = 'YOUR_API_KEY';\n    this.onSuccess = (res) =\u003e console.log('###onSuccess', res);\n    this.onError = (err) =\u003e console.log('###onErr', err);\n  }\n\n  onUploadSuccess(res: object) {\n    console.log('###uploadSuccess', res);\n  }\n\n  onUploadError(err: any) {\n    console.log('###uploadError', err);\n  }\n}\n```\n\n`component.html`\n```html\n\u003cng-picker-overlay\n  [apikey]=\"apikey\"\n  (uploadSuccess)=\"onUploadSuccess($event)\"\n  (uploadError)=\"onUploadError($event)\"\u003e\n  \u003cbutton\u003eOpen picker\u003c/button\u003e\n\u003c/ng-picker-overlay\u003e\n```\n#### Open picker in inline mode\n\n`component.ts`\n```typescript\nexport class AppComponent implements OnInit {\n  apikey: string;\n\n  ngOnInit() {\n    this.apikey = 'YOUR_API_KEY';\n  }\n\n  onUploadSuccess(res: object) {\n    console.log('###uploadSuccess', res);\n  }\n\n  onUploadError(err: any) {\n    console.log('###uploadError', err);\n  }\n}\n```\n\n`component.html`\n```html\n\u003cng-picker-inline\n  [apikey]=\"apikey\"\n  (uploadSuccess)=\"onUploadSuccess($event)\"\n  (uploadError)=\"onUploadError($event)\"\u003e\n  \u003cbutton\u003eOpen picker\u003c/button\u003e\n\u003c/ng-picker-inline\u003e\n```\n\n#### Open picker in drop pane mode\n\n`component.ts`\n```typescript\nexport class AppComponent implements OnInit {\n  apikey: string;\n\n  ngOnInit() {\n    this.apikey = 'YOUR_API_KEY';\n  }\n\n  onUploadSuccess(res: object) {\n    console.log('###uploadSuccess', res);\n  }\n\n  onUploadError(err: any) {\n    console.log('###uploadError', err);\n  }\n}\n```\n\n`component.html`\n```html\n\u003cng-picker-drop-pane\n  [apikey]=\"apikey\"\n  (uploadSuccess)=\"onUploadSuccess($event)\"\n  (uploadError)=\"onUploadError($event)\"\u003e\n\u003c/ng-picker-drop-pane\u003e\n```\n#### Get transformed url using filestackTransform pipe\n\n`component.ts`\n```typescript\n...\nimport { TransformOptions } from 'filestack-js';\n\nexport class AppComponent implements OnInit {\n  transformOptions: TransformOptions;\n\n  constructor(private filestackService: FilestackService) {}\n\n  ngOnInit() {\n    this.transformOptions = {\n      resize: {\n        width: 400\n      },\n      sepia: {\n        tone: 80\n      }\n    }\n  }\n}\n```\n\n`component.html`\n```html\n  \u003cimg src=\"{{'5aYkEQJSQCmYShsoCnZN' | filestackTransform: transformOptions}}\"\u003e\n```\n#### Select file and upload using sdk client.upload()\n\n`component.ts`\n```typescript\nexport class AppComponent implements OnInit {\n  file: any;\n\n  constructor(private filestackService: FilestackService) {}\n\n  ngOnInit() {\n    this.filestackService.init('YOUR_API_KEY'); \n  }\n  fileChanged(e) {\n    this.file = e.target.files[0];\n  }\n  uploadFile() {\n    this.filestackService.upload(this.file)\n      .subscribe(res =\u003e console.log(res));\n  }\n}\n```\n\n`component.html`\n```html\n  \u003cinput type='file' (change)=\"fileChanged($event)\"\u003e\n  \u003cbutton (click)=\"uploadFile()\"\u003eUpload file\u003c/button\u003e\n```\n\n## Documentation\nYou can find necessary info about avalaible options for actions (Client class methods) at https://filestack.github.io/filestack-js/\n\n## Development\nAfter adding changes to `FilestackAngularModule` in /projects/filestack-angular/src \n\nyou need to build this module\n\n```\nng build filestack-angular\n```\n\nthis command will produce /dist which conatins ready to use filestack module\n\nyou can check correctness of it by checking examples from `example` app:\n\n1. Update api key in `/projects/example/src/app/app.component.ts`\n\n2. start app locally\n```\nng serve example\n```\n3. visit [http://localhost:4200/](http://localhost:4200/)\n\n## Contributing\nAny of your contributions or ideas are more than welcome. Please consider that we follow the conventional commits specification to ensure consistent commit messages and changelog formatting.\n","funding_links":[],"categories":["Third Party Components","Recently Updated"],"sub_categories":["File Upload","[Feb 28, 2025](/content/2025/02/28/README.md)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilestack%2Ffilestack-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilestack%2Ffilestack-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilestack%2Ffilestack-angular/lists"}