Angular component library which allow you to easily integrate powerful filestack-api into your app.

Table of Contents

• Overview
• Usage
  • Installation
  • CDN
  • Available inputs
  • Available outputs
  • FilestackService
  • Examples
    • Open picker directly after component initialization
    • Open picker by clicking the custom button
    • Open picker in inline mode
    • Open picker in drop pane mode
    • Get transformed url using filestackTransform pipe
    • Select file and upload using sdk client.upload()
• Documentation
• Development
• Contributing

filestack-angular is a wrapper on 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 you can also do using this component.

This repository a contains angular workspace with two projects:

• filestack-angular library which contains FilestackAngularModule published via npm
• example angular app to show examples of using FilestackModule features

FilestackAngularModule consists of

• FilestackService - wrapper for a filestack-js client class with added support for an observables
• FilestackTransformPipe - Pipe for easily creating url with transformations in your template
• PickerOverlayComponent - Filestack picker component that will open in overlay mode
• PickerInlineComponent - Filestack picker component that will open in a provided html container
• PickerDropPaneComponent - Filestack drop pane component that will open in a provided html container which can be also used independently if needed

Install it through NPM

npm install filestack-js
npm install @filestack/angular

Include FilestackModule in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FilestackModule } from '@filestack/angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FilestackModule.forRoot({ apikey: YOUR_APIKEY, options: ClientConfig })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Use in .html file

<ng-picker-overlay
  apikey="YOUR_API_KEY">
</ng-picker-overlay>

The compiled filestack angular module is also available through our cdn

https://static.filestackapi.com/filestack-angular/{MODULE_VERSION}/filestack-angular.umd.min.js

and map file to module

https://static.filestackapi.com/filestack-angular/{MODULE_VERSION}/filestack-angular.umd.min.js.map

where {MODULE_VERSION} is desired version of this package

The FilestackService is an adapter on filestack-js client class and allows you to work with Observables instead of promises. Methods get the same input params as client class method.

Below you can find some basic examples.

You can also find and try these examples in angular-filestack-example app

To run it locally type

ng serve filestack-angular-example

then visit

http://localhost:4200/

component.ts

export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
  }
}

component.html

<ng-picker-overlay
  [apikey]="apikey">
</ng-picker-overlay>

component.ts

export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
    this.onSuccess = (res) => console.log('###onSuccess', res);
    this.onError = (err) => console.log('###onErr', err);
  }

  onUploadSuccess(res: object) {
    console.log('###uploadSuccess', res);
  }

  onUploadError(err: any) {
    console.log('###uploadError', err);
  }
}

component.html

<ng-picker-overlay
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">
  <button>Open picker</button>
</ng-picker-overlay>

component.ts

export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
  }

  onUploadSuccess(res: object) {
    console.log('###uploadSuccess', res);
  }

  onUploadError(err: any) {
    console.log('###uploadError', err);
  }
}

component.html

<ng-picker-inline
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">
  <button>Open picker</button>
</ng-picker-inline>

component.ts

export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
  }

  onUploadSuccess(res: object) {
    console.log('###uploadSuccess', res);
  }

  onUploadError(err: any) {
    console.log('###uploadError', err);
  }
}

component.html

<ng-picker-drop-pane
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">
</ng-picker-drop-pane>

component.ts

...
import { TransformOptions } from 'filestack-js';

export class AppComponent implements OnInit {
  transformOptions: TransformOptions;

  constructor(private filestackService: FilestackService) {}

  ngOnInit() {
    this.transformOptions = {
      resize: {
        width: 400
      },
      sepia: {
        tone: 80
      }
    }
  }
}

component.html

  <img src="{{'5aYkEQJSQCmYShsoCnZN' | filestackTransform: transformOptions}}">

component.ts

export class AppComponent implements OnInit {
  file: any;

  constructor(private filestackService: FilestackService) {}

  ngOnInit() {
    this.filestackService.init('YOUR_API_KEY'); 
  }
  fileChanged(e) {
    this.file = e.target.files[0];
  }
  uploadFile() {
    this.filestackService.upload(this.file)
      .subscribe(res => console.log(res));
  }
}

component.html

  <input type='file' (change)="fileChanged($event)">
  <button (click)="uploadFile()">Upload file</button>

You can find necessary info about avalaible options for actions (Client class methods) at https://filestack.github.io/filestack-js/

After adding changes to FilestackAngularModule in /projects/filestack-angular/src

you need to build this module

ng build filestack-angular

this command will produce /dist which conatins ready to use filestack module

you can check correctness of it by checking examples from example app:

1. Update api key in /projects/example/src/app/app.component.ts

2. start app locally

ng serve example

3. visit http://localhost:4200/

Any 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.