filestack-angular

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

Overview

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

Usage

Installation

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>

CDN

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

Available inputs

Name	Type	Required	Default	Description
apikey	String	True		Filestack api key
options	Object			Check pickerOptions
clientOptions.cname	String			Check cname
clientOptions.security	Object(Security)			Check security
clientOptions.sessionCache	Boolean			Check sessionCache
file	InputFile
source	String			Filestack handle or external url. Use it for 'transform', 'remove', 'metadata' or 'preview' action

Available outputs

Name	Type	Required	Default	Description
uploadSuccess	Subject			A subject that emits on uploadSuccess event
uploadError	Subject			A subject that emits on uploadError event

FilestackService

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.

method	return	description
init	void	Init filestack client with your apikey
picker	PickerInstance	Open or close picker instance
transform	string	Create a transformation url
retrieve	Observable	Retrieve an info about a filestack handle
metadata	Observable	Access files via their Filestack handles
storeURL	Observable	Get info about a filestack handle metadata
upload	Observable	Upload a file to the Filestack
remove	Observable	Remove a file from the Filestack
removeMetadata	Observable	Remove a file only from the Filestack system. The file remains in storage.
preview	HTMLIFrameElement	Window
logout	Observable	Clear cloud session from picker procviders
setClientInstance	ClientInstance	Put an existing client instance into filestack service

Examples

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/

Open picker directly after component initialization

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>

Open picker by clicking the custom button

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>

Open picker in inline mode

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>

Open picker in drop pane mode

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>

Get transformed url using filestackTransform pipe

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}}">

Select file and upload using sdk client.upload()

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>

Documentation

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

Development

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/

Contributing

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.