Angular SDK

Enterprise-Ready File Management for Angular

Build robust, scalable file upload solutions with our comprehensive Angular SDK. Designed for modern enterprise applications with full TypeScript support.

Install via CLI

View Angular Docs

Angular Component Example

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-upload',
  templateUrl: './app.component.html'
})
export class UploadComponent {
  apiKey = 'YOUR_API_KEY';

  pickerOptions = {
    accept: ['image/*'],
    maxFiles: 5
  };

  onUploadSuccess(result: unknown): void {
    console.log('Upload successful:', result);
  }

  onUploadError(error: unknown): void {
    console.error('Upload failed:', error);
  }
}

<!-- app.component.html -->
<ng-picker-overlay
  [apikey]="apiKey"
  [pickerOptions]="pickerOptions"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">

  <button type="button">
    Upload Files
  </button>

</ng-picker-overlay>

Built for Angular Developers

Our Angular SDK integrates seamlessly with the Angular ecosystem, providing directives, services, and components that follow Angular best practices.

Angular Picker Components

Use overlay, inline, and drop-pane Picker components with Angular inputs, outputs, and lifecycle handling.

Injectable Services

Powerful services for dependency injection, making file operations accessible throughout your application architecture.

Full TypeScript Support

Complete type definitions and IntelliSense support for a superior development experience with compile-time type checking.

RxJS Observables

Built on RxJS observables for reactive programming patterns, perfect for handling async file operations and progress tracking.

Tree-Shakable Modules

Modular architecture with tree-shaking support to keep your bundle size optimized and only include what you need.

Trusted by innovative companies worldwide

Angular-Native Architecture

Our Angular SDK follows Angular conventions and patterns, providing a familiar developer experience that integrates seamlessly with your existing Angular projects.

📦 NgModule Integration
Easy module imports with forRoot() configuration

🎯 Directive-Based Usage
Simple template directives for common use cases

💉 Dependency Injection
Injectable services for programmatic file operations

🔄 Observable Streams
RxJS-based reactive programming patterns

🏗️ Component Lifecycle
Proper cleanup and memory management

Module Setup

// filestack.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FilestackModule } from '@filestack/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FilestackModule.forRoot({
      apikey: 'YOUR_API_KEY',
    })
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

// upload.service.ts
import { Injectable } from '@angular/core';
import { FilestackService } from '@filestack/angular';

@Injectable({
  providedIn: 'root'
})
export class UploadService {
  constructor(private filestack: FilestackService) {}

  openPicker(): Promise<void> {
    return this.filestack
      .picker({
        onUploadDone: result => {
          console.log('Upload completed:', result);
        }
      })
      .open();
  }
}

Angular CLI Integration

Install and configure our Angular SDK using familiar Angular CLI commands and patterns.

Package Installation

npm

npm install filestack-js @filestack/angular

Angular CLI Integration

1Install the package
2Import FilestackModule
3Configure with API key
4Use directives in templates

Module Setup

Configure the module in your app.module.ts:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-upload',
  templateUrl: './app.component.html'
})
export class UploadComponent {
  apiKey = 'YOUR_API_KEY';

  pickerOptions = {
    accept: ['image/*'],
    maxFiles: 5
  };

  onUploadSuccess(result: unknown): void {
    console.log('Upload successful:', result);
  }

  onUploadError(error: unknown): void {
    console.error('Upload failed:', error);
  }
}

// app.component.html
<ng-picker-overlay
  [apikey]="apiKey"
  [pickerOptions]="pickerOptions"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">
  <button type="button">Upload Files</button>
</ng-picker-overlay>

Complete Angular Application

// Complete working example
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="upload-container">
      <h2>Upload Your Files</<span style="color: #00f;">h2>

      <ng-picker-overlay
        [apikey]="apiKey"
        [pickerOptions]="pickerOptions"
        (uploadSuccess)="onUploadSuccess($event)"
        (uploadError)="onUploadError($event)">

        <button
          type="button"
          class="upload-btn">
          Choose Files
        </button>

      </ng-picker-overlay>

      <div *ngIf="uploadedFiles.length > 0"
           class="file-list">

        <h3>Uploaded Files:</<span style="color: #00f;">h3>

        <ul>
          <li *ngFor="let file of uploadedFiles">
            {{ file.filename }} - {{ file.size | fileSize }}

            <img
              [src]="file.url"
              *ngIf="file.mimetype.startsWith('image')"
              style="max-width: 100px; margin-left: 10px;">

          </li>
        </ul>

      </div>

    </div>
  `
})
export class AppComponent {

  apiKey = 'YOUR_API_KEY';

  uploadedFiles: any[] = [];

  pickerOptions = {
    accept: ['image/*'],
    maxFiles: 5
  };

  onUploadSuccess(result: any): void {
    console.log('Upload successful:', result);
    this.uploadedFiles = result.filesUploaded;
  }

  onUploadError(error: any): void {
    console.error('Upload failed:', error);
  }
}

Deploy Angular File Components

Join enterprise teams worldwide who trust Filestack’s Angular SDK for mission-critical file management. Get started with our comprehensive Angular integration today.