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
* Live Demo
* NPM
* Tutorial

Installing

Install `filestack-react through npm.

`shell
npm i filestack-react
`

Import


`javascript
const ReactFilestack = require('filestack-react');
`
In ES2015 and newer
`javascript
import ReactFilestack from 'filestack-react';
`

Import with filestack-js client

`javascript
import ReactFilestack, { client } from 'filestack-react';
`
client is available from version 1.3.4

Usage

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

1. Custom Designed button
`jsx
apikey={YOUR_API_KEY}
buttonText="Click me"
buttonClass="classname"
options={options}
onSuccess={this.yourCallbackFunction}
preload={true}
/>
`

2. Custom render
`jsx
apikey={apikey}
options={options}
onSuccess={onSuccess}
onError={onError}
preload={true}
render={({ onPick }) => (



)}
/>
`

3. Other modes
`jsx
apikey={YOUR_API_KEY}
mode="upload"
options={options}
onSuccess={onSuccess}
preload={true}
/>
`

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:


`javascript
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.
`jsx
apikey={YOUR_API_KEY}
options={options}
onSuccess={this.yourCallbackFunction}
link
/>
`

filestack-js client

You can also import the official client and decouple its React component ReactFilestack.
However, you will need to initialize it with the API key and any client options you need such as security, cname, and sessionCache.

`javascript
import { client } from 'filestack-react';
const filestack = client.init('YOUR_API_KEY', options);
`

Examples

You can find examples used in livedemo in /examples/demo.

Go to the /examples/demo and type

`javascript
npm i
npm start
`




Available Props

Please also see the Official JavaScript API reference

> ### apikey
> required, string. An API key for Filestack.

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

> ### preload
> optional, boolean. default false. If set on true the component will prepare all necessary assets like scripts and styles when a constructor will be called. Otherwise all assets are downloaded during onClick event.

> ### 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 specific mode behavior. For example, for pick` mode the following options are supported.

> ### 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.

> ### sessionCache
> optional If true then remember users (up to session expiry) when using the Filestack Cloud API. By default users need to authenticate on every pick.

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