@filestack/angular v2.0.2
Table of Contents
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 containsFilestackAngularModule
published via npmexample
angular app to show examples of usingFilestackModule
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
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 | Use it to insert a file object for 'upload' action | |||
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 | Get preview of uploaded file (need additional addon in your Filestack account) |
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:
Update api key in
/projects/example/src/app/app.component.ts
start app locally
ng serve example
- 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.
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
2 years ago
2 years ago
4 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago