/react-filestack

react component for filestack

Primary LanguageJavaScript

React Filestack

react component for filestack

How to install

This is for v3 filestack api. If you want to use previous v2 filepicker api, go here

Live Demo NPM Github

npm install react-filestack

Import

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

In ES2015

import ReactFilestack from 'react-filestack';

Usage

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

Custom Designed button

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

Other mode than 'pick'

<ReactFilestack apikey={Your API Key} mode="upload" options={options} onSuccess={this.yourCallbackFunction} />

Available modes:

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

make your own options and callback function, connect it to the component and get the results(either fpfiles or blob object)

const options = {
  accept: 'image/*',
  fromSources: ['COMPUTER', 'FACEBOOK', 'CLOUDAPP']
};
yourCallbackFunction(result) {
  // handle result here
}

Link instead of button if you want a custom button to be a link, just put link props

<ReactFilepicker apikey={Your API Key} link options={options} onSuccess={this.yourCallbackFunction} />

Result

filestack Works well with IE...

Demo

git clone this project and open index.html You can also see live demo here Link

Props

Official Filestack Documentation

apikey

required string. An API key for filestack

mode

optional string. default 'pick'. Look supported modes above.

file

optional object. use if you need to insert file object for upload mode.

log

optional object. default false. choose whether to console.log filepicker process

onSuccess

optional function. get result(fpfiles or blob object) after upload is done.

onError

optional function. send error object as callback parameter

options

optional object. Detailed options for button. See Javascript API of official documentation. Put everything in it if you think you have to

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 custom button, you can set your own text.

buttonClass

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

Wanna Contribute?

Please contribute to this package via Pull Request, or you can open Issues!

npm install && npm run build
run index.html

Contributors

License

MIT