filestack-react

Filestack React

This is the official React component for Filestack API and content management system that makes it easy to add powerful file uploading and transformation capabilities to any web or mobile application.

Resources

• Filestack
• Documentation
• API Reference
• Live Demo
• NPM
• Tutorial

Installing

Install filestack-react through npm

npm install filestack-react

or

yarn add filestack-react

Import

var ReactFilestack = require('filestack-react');

In ES2015

import ReactFilestack from 'filestack-react';

Usage

You should register Filestack website and get an API key first!

1. Custom Designed button

<ReactFilestack
  apikey={YOUR_API_KEY}
  buttonText="Click me"
  buttonClass="classname"
  options={options}
  onSuccess={this.yourCallbackFunction}
/>

2. Custom render

<ReactFilestack
  apikey={apikey}
  options={options}
  onSuccess={onSuccess}
  onError={onError}
  render={({ onPick }) => (
    <div>
      <strong>Find an avatar</strong>
      <button onClick={onPick}>Pick</button>
    </div>
  )}
/>

3. Other modes

<ReactFilestack
  apikey={YOUR_API_KEY}
  mode="upload"
  options={options}
  onSuccess={onSuccess}
/>

Available modes:

• upload
• transform
• retrieve
• storeUrl
• metadata
• remove

Define your own options object and callback function, connect them to the component and get the result from Filestack:

const options = {
  accept: 'image/*',
  maxFiles: 5,
  storeTo: {
    location: 's3',
  },
};

onSuccess(result) {
  // handle result here
}

Do you prefer a link instead of a button?

You can pass a custom prop link.

<ReactFilestack
  apikey={YOUR_API_KEY}
  options={options}
  onSuccess={this.yourCallbackFunction}
  link
/>

Result

You can find the example in /examples/demo.

Available Props

Official Filestack Documentation

apikey

required, string. An API key for Filestack.

mode

optional, string. default 'pick'. Can be one of pick, upload, transform, retrieve, metadata, remove.

file

optional object. use it to insert a file object in upload mode.

onSuccess

optional function. Handle the results after a successful response.

onError

optional function. Handle errors.

options

optional object. Detailed options to customize the mode behavior.

See Javascript API from theofficial documentation.

security

optional object. If you have security enabled, you will need to initialize the client with a valid Filestack policy and signature in order to perform the requested call.

buttonText

optional string. When using a custom button, you can set the text.

buttonClass

optional string. When using custom button, you can set className to style it.

cname

optional Custom domain to use for all URLs. This requires the custom CNAME feature on your Filestack app.

Versioning

Filestack React follows the Semantic Versioning.

Issues

If you have problems, please create a Github Issue.

Wanna Contribute?

Please see CONTRIBUTING.md for details.

Contributors

• Zero Cho
• Samuele Zaza