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
@Component({
  selector: 'app-upload',
  template: `
    <button 
      filestack
      [options]="pickerOptions"
      (uploadSuccess)="onUploadSuccess($event)"
      apikey="YOUR_API_KEY">
      Upload Files
    </button>
  `
})
export class UploadComponent {
  pickerOptions = {
    accept: 'image/*',
    maxFiles: 5
  };
}

Built for Angular Developers

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

Angular Directives

Easy-to-use directives that integrate directly into your templates with full event binding and lifecycle support.

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.

Reactive Forms Integration

Seamless integration with Angular Reactive Forms including validators, form controls, and error handling.

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 { FilestackModule } from 'filestack-angular';

@NgModule({
  imports: [
    FilestackModule.forRoot({
      apikey: 'YOUR_API_KEY',
      defaultOptions: {
        accept: ['image/*', 'video/*'],
        maxFiles: 10
      }
    })
  ],
  // ...
})
export class AppModule { }

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

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

  uploadFiles(): Observable {
    return this.filestack.picker().open();
  }
}

Angular CLI Integration

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

Package Installation

npm install filestack-angular

yarn add filestack-angular

ng add 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:

import { FilestackModule } from 'filestack-angular'; @NgModule({ imports: 
[FilestackModule.forRoot()] })

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 Filesh2>

      <button 
        filestack
        [options]="pickerOptions"
        (uploadSuccess)="onUploadSuccess($event)"
        (uploadError)="onUploadError($event)"
        apikey="YOUR_API_KEY"
        class="upload-btn">
        Choose Files
      button>

      <div *ngIf="uploadedFiles.length > 0" 
           class="file-list">
        <h3>Uploaded Files: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 {
  uploadedFiles: any[] = [];
  
  pickerOptions = {
    accept: ['image/*', 'video/*', '.pdf'],
    maxFiles: 5,
    fromSources: [
      'local_file_system',
      'url',
      'googledrive'
    ]
  };

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

  onUploadError(error: any) {
    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.