Filestack for Angular

The @filestack/angular library is a component-based wrapper for the core filestack-js SDK. It’s designed to help you integrate Filestack’s file handling services into your Angular applications with minimal effort and a familiar developer experience. You can implement the powerful Filestack Picker and its features in just a few lines of code. The FilestackAngularModule provides everything you need to get started, including:

npm install filestack-js @filestack/angular

Import FilestackModule into your app.module.ts and configure it with your API key.

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,
    // Add your Filestack API key
    FilestackModule.forRoot({ apikey: 'YOUR_APIKEY' })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

For advanced use cases, you can access the underlying filestack-js client functionality through the FilestackService. This allows you to use methods like transform(), storeURL(), and upload(), while leveraging the power of Observables.

Use the <ng-picker-overlay> component and place a custom button inside it to act as the trigger.

<!-- component.html -->
<ng-picker-overlay
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)">
  <button class="your-custom-button">Open Picker</button>
</ng-picker-overlay>

Use the <ng-picker-inline> component to render the picker directly inside a container in your application’s DOM.

<!-- component.html -->
<ng-picker-inline
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)">
</ng-picker-inline>

Apply transformations directly in your template using the filestackTransform pipe.

<!-- component.html -->
<img [src]="'FILE_HANDLE' | filestackTransform: transformOptions">

// component.ts
import { TransformOptions } from 'filestack-js';

export class AppComponent {
  transformOptions: TransformOptions = {
    resize: { width: 400 },
    sepia: { tone: 80 }
  };
}

<!-- component.html -->
<input type='file' (change)="fileChanged($event)">
<button (click)="uploadFile()">Upload File</button>

// 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));
  }
}