Quick Start

React Quick Start

Compatibility Notice: The filestack-react library currently supports React versions 16, 17, and 18. If you are starting a new project, please ensure you are using a compatible version of React. Support for React 19 is coming soon.

1 Install the Library

Get started by adding the Filestack React library to your project.

npm install filestack-react

2 Use the Picker Component

Import and use the `PickerOverlay` component in your app. Replace `YOUR_API_KEY` with your actual key.

import React from 'react';
import { PickerOverlay } from 'filestack-react';

const FileUploader = () => {
  return (
    <div>
      <h2>Filestack Uploader in React</h2>
      <PickerOverlay
        apikey={'YOUR_API_KEY'}
        onUploadDone={(result) => {
          console.log('Upload successful:', result);
        }}
        pickerOptions={{
          maxFiles: 5,
          accept: ['image/*'],
          fromSources: [
            'local_file_system',
            'url',
            'googledrive',
          ],
        }}
      />
    </div>
  );
};

export default FileUploader;

3 Run Your Server

Start your development server to see the Filestack picker in action.

npm start

Angular Quick Start

1 Install via NPM

npm install filestack-js @filestack/angular

2 Include FilestackModule

Import the module in your `app.module.ts`.

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,
    FilestackModule.forRoot({
      apikey: 'YOUR_APIKEY',
      options: {
        /* Add client config options here */
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3 Use in Template

Add the component to your HTML file.

<ng-picker-overlay 
  apikey="YOUR_API_KEY">
</ng-picker-overlay>

4 Run Your Server

ng serve

Python Quick Start

1 Installation

Install the Filestack Python SDK using pip.

pip install filestack-python

2 Upload a File

Use the `Client` class to upload a file.

from filestack import Client

client = Client('<YOUR_API_KEY>')
new_filelink = client.upload(filepath='path/to/file')
print(new_filelink.url)

3 Work with Filelinks

You can perform various operations on a `Filelink` object.

# Get content
file_content = new_filelink.get_content()

# Download
size_in_bytes = new_filelink.download('/path/to/save/file')

# Overwrite
filelink.overwrite(filepath='/path/to/new/file')

# Transform
filelink.resize(width=400).flip()

# Delete
filelink.delete()

Java Quick Start

1 Installation

Add the dependency to your build configuration (e.g., build.gradle).

implementation 'org.filestack:filestack-java:1.0.1'

2 Upload a File

Create a client and use it to upload a file synchronously or asynchronously.

// Create a client
Config config = new Config("API_KEY");
Client client = new Client(config);

// Perform a synchronous, blocking upload
FileLink file = client.upload("/path/to/file", false);

// Perform an asynchronous, non-blocking upload
Flowable<Progress<FileLink>> upload = client.uploadAsync("/path/to/file", false);

upload.doOnNext(new Consumer<Progress<FileLink>>() {
  @Override
  public void accept(Progress<FileLink> progress) throws Exception {
    System.out.printf("%f%% uploaded\n", progress.getPercent());
    if (progress.getData() != null) {
      FileLink file = progress.getData();
    }
  }
});

JavaScript CDN Quick Start

1 Add to HTML

Include the Filestack script, add a button, and initialize the picker.

<!DOCTYPE html>
<html>
<head>
  <title>Filestack Demo</title>
  <script src="//static.filestackapi.com/filestack-js/4.x.x/filestack.min.js"></script>
</head>
<body>
  <button id="picker">Upload File</button>

  <script>
    const client = filestack.init('YOUR_API_KEY');
    const options = {
      onUploadDone: (res) => console.log(res),
    };
    const picker = client.picker(options);

    const pickerBtn = document.getElementById('picker');
    pickerBtn.addEventListener('click', () => picker.open());
  </script>
</body>
</html>

2 Run the Project

Simply open the `index.html` file directly in your web browser to see it in action.

JavaScript SDK Quick Start

1 Installation

npm install filestack-js

2 Usage (ES Module)

import * as filestack from 'filestack-js';
const client = filestack.init('YOUR_API_KEY');

PHP Quick Start

1 Install with Composer

composer require --prefer-dist filestack/filestack-php

2 Upload a File

Instantiate the `FilestackClient` and call the upload method.

use Filestack\FilestackClient;

$client = new FilestackClient('YOUR_API_KEY');
$filelink = $client->upload('/path/to/file');

3 Manipulate Files

Create a `Filelink` object to transform, download, or delete files.

use Filestack\Filelink;

$filelink = new Filelink('YOUR_FILE_HANDLE', 'YOUR_API_KEY');

// Transform and save
$transformed_filelink = $filelink
            ->circle()
            ->blur(['amount' => '20'])
            ->save();

// Download
$filelink->download('/path/to/save/file.jpg');

// Delete
$filelink->delete();

Developer Portal

If you haven’t already signed up for a Filestack account, you can do it here: Filestack Sign Up.

The Developer Portal is where you can set up application configurations, such as enabling security, storage backends, storage aliases, and OAuth clients if you use our cloud integrations. You can also view analytics and search through all of your application’s uploaded files in the Assets section.

Application and API key

Once you have an account, you can begin creating applications. Each application is given a public API key and a secret key, which are used throughout Filestack to authenticate and authorize operations on your resources.

Having an API key gives you access to upload and transform files using Filestack. In addition, each application has configuration settings that apply only to it, so you can create multiple applications for varying use cases.