Socket
Socket
Sign inDemoInstall

@filestack/angular

Package Overview
Dependencies
4
Maintainers
5
Versions
9
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@filestack/angular


Version published
Maintainers
5
Install size
253 kB
Created

Readme

Source

filestack-angular

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

Table of Contents

  • Overview
  • Usage
  • 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

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

NameTypeRequiredDefaultDescription
apikeyStringTrueFilestack api key
optionsObjectCheck pickerOptions
clientOptions.cnameStringCheck cname
clientOptions.securityObject(Security)Check security
clientOptions.sessionCacheBooleanCheck sessionCache
fileInputFile
sourceStringFilestack handle or external url. Use it for 'transform', 'remove', 'metadata' or 'preview' action

Available outputs

NameTypeRequiredDefaultDescription
uploadSuccessSubjectA subject that emits on uploadSuccess event
uploadErrorSubjectA 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.

methodreturndescription
initvoidInit filestack client with your apikey
pickerPickerInstanceOpen or close picker instance
transformstringCreate a transformation url
retrieveObservableRetrieve an info about a filestack handle
metadataObservableAccess files via their Filestack handles
storeURLObservableGet info about a filestack handle metadata
uploadObservableUpload a file to the Filestack
removeObservableRemove a file from the Filestack
removeMetadataObservableRemove a file only from the Filestack system. The file remains in storage.
previewHTMLIFrameElementWindow
logoutObservableClear cloud session from picker procviders
setClientInstanceClientInstancePut 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
  1. 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.

FAQs

Last updated on 13 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc