import { ApplicationConfig } from '@angular/core';
import { provideFilestack } from '@filestack/angular';
export const appConfig: ApplicationConfig = {
providers: [provideFilestack({ apikey: 'YOUR_API_KEY' })],
};
From Install to First Upload
Four steps. The schematic does the first two, and the Angular file upload SDK is wired into your app config from there.
Three Pickers, One API Key
Each one is a standalone component with the same inputs and outputs. Import the one your layout calls for.
Overlay
Opens the picker over your page from any trigger you wrap in it. Selector ng-picker-overlay.
Inline
Renders the picker inside a container you control, so it sits in the page like any other form field. Selector ng-picker-inline.
Drop pane
A drag and drop target for the whole area you give it. Selector ng-picker-drop-pane.
What the SDK Does Once It Is In
Four capabilities behind the same provider. Pick the one you came for.
A handle back on uploadSuccess
Wrap your own button in the picker component. The uploadSuccess output emits the stored file, and uploadError emits a typed error.
Explore Filestack Uploads[pickerOptions]="pickerOptions"
(uploadSuccess)="onUploadSuccess($event)"
(uploadError)="onUploadError($event)">
<button type="button">Choose files</<span class="c-key">button>
</<span class="c-key">ng-picker-overlay>
Typed progress as an observable
- Progress ticks carry totalPercent and totalBytes
- A final complete tick carries the stored file
- Failures emit an error tick and error the stream
this.fs.uploadWithProgress(file).subscribe(e => {
if (e.status === 'progress') this.percent = e.totalPercent;
if (e.status === 'complete') this.result = e.file;
});
Transformations as a URL
Inject FilestackFilelink to chain tasks in TypeScript, or use the filestackTransform pipe in a template. The key comes from the active client session.
Explore Transformationsconst url = this.filelink.forHandle(handle).resize({ width: 200 }).toString();
<img [src]="handle | filestackTransform: { resize: { width: 200 } }" />
Renders on the server as it is
Every DOM path in the SDK is platform guarded, so an Angular Universal app takes the picker with no guard of its own.
Read the Angular Docspreview() // returns null
<ng-picker-inline> // container renders, picker starts after hydration
Angular Versions This Runs On
The peer range has no upper bound, so the next Angular major installs the day it lands.
| @filestack/angular | Angular | Node | Status |
|---|---|---|---|
| 4.x | 19, 20, 21, 22 | Set by your Angular major | Current |
| 3.x | 18 | 18.19.1, 20.11.1 or 22 and up | Maintenance |
| 2.x | 14 | 14.15 or 16 and up | End of life |
Straight talk: Angular 15, 16 and 17 fall between published peer ranges. An app on one of those upgrades Angular first, and Angular 18 stays on @filestack/angular@3, which is in maintenance and still takes fixes.
The File Code You Would Otherwise Own
Filestack runs every job in both columns. What changes is whether your team writes and maintains the code for it.
Or write one URL
Every job on the left keeps happening. It happens behind the provider, on infrastructure Filestack maintains, reached through FilestackService as observables.
Frequently Asked Questions
Which Angular versions does the SDK support?
Version 4 supports Angular 19, 20, 21 and 22. The peer range has no upper bound, so a new Angular major installs the day it lands. Angular 18 stays on version 3.
Does it work with standalone components?
Yes. provideFilestack() registers the SDK in an ApplicationConfig, and the picker components and the transform pipe are standalone, so a component imports the one it uses.
Does the picker work with server-side rendering?
Yes. Every DOM path is platform guarded. openPicker() and preview() return null on the server, and the client loads through a dynamic import.
How do I add it to an existing Angular app?
Run ng add @filestack/angular. It installs both packages, prompts for your API key, and writes the provider into app.config.ts or app.module.ts.