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
• Documentation
• Development
• Contributing

Overview

filestack-angular is a kind of 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 (the filestack-js SDK is installed automatically as a dependency)

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
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Use in .html file

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

CDN

In the case you would like to import filestack-module bundle file directly to your app instead of using npm package you can find it on our cdn:

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

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

Available outputs

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.

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.