How to Integrate Filestack Into a Website or App
Updated
Filestack's own description of the integration is "your entire file infrastructure in two lines of code," and the practical path is: install an SDK for your stack, then either drop in the front-end picker or call the API from your backend. Filestack publishes SDKs for JavaScript, React, Angular, PHP, Python, Java, Ruby, Go, and Swift, so the integration route depends mainly on whether your upload UI lives in the browser or on the server.
Two Integration Paths
Filestack's page describes two ways to get files in:
- Front-end drop-in picker — add the picker to your page so users upload directly from the browser. This is the "two lines of code" path and the one that exposes the 20+ connected sources (local disk, Dropbox, Instagram, Google Drive, and others) without you building per-source connectors.
- Backend API calls — call the API directly from your server when uploads are triggered by your own logic rather than a user-facing widget.
Both feed the same pipeline: ingestion, processing, and delivery. The page frames these as three integrated layers that replace a separate upload service, processing workers, and CDN configuration.
Step-by-Step: JavaScript SDK
The page shows the npm install entry point, so a JavaScript project is the most concrete example:
- Install the SDK. Run
npm install filestack-js. The page lists this as the install command for the JavaScript SDK. - Initialize the client. Create a Filestack client instance using your API key. (The key comes from your Filestack account — the page links to a free sign-up and to Plans & Pricing, but does not state what each plan includes.)
- Open the picker or call the API. For a browser UI, open the picker so users can choose a source and upload. For server-side flows, call the upload API from your backend instead.
- Verify the upload. Confirm the file is retrievable and that any transformation URLs you plan to use resolve correctly.
Expected result: a working upload path from your app to Filestack storage, with the file available for transformation and delivery.
Choosing an SDK
| Your stack | SDK |
|---|---|
| JavaScript (general web) | JavaScript |
| React | React |
| Angular | Angular |
| PHP | PHP |
| Python | Python |
| Java | Java |
| Ruby | Ruby |
| Go | Go |
| Swift (Apple platforms) | Swift |
If your framework isn't listed, the JavaScript SDK is the general web entry point; the page also links to a full "All SDKs" index.
What You Get After Upload
Integration doesn't stop at ingestion. Once files are in, the same platform handles:
- Transformation by URL — crop, convert, and optimize by changing URL parameters, with no backend processing. Parameters are chainable for crop, filters, and format conversion, and results are cached and delivered through the Filestack CDN.
- In-browser editing — an embeddable editor lets users crop, rotate, and apply filters client-side before upload. Document, audio, and video conversion are also listed.
- Delivery — a global CDN with signed URLs and access policies, serving every file type from the same infrastructure that ingested it.
Common Integration Questions
Do I need to build connectors for Dropbox or Google Drive? No — the picker connects 20+ sources out of the box, which is the main reason to use the drop-in picker rather than a custom upload form.
What about mobile uploads? The page claims the Content Ingestion Network delivers "100× more reliable mobile uploads," with resumable uploads and async storage routing so files are available instantly. Treat the 100× figure as Filestack's own claim, not an independently verified benchmark.
Where do I start? The page points to documentation for upload details and to a free sign-up plus a pricing page. Check the pricing page for current plan limits before committing, since the page itself doesn't state what the free tier includes.