react component for filestack
This is for v3 filestack api. If you want to use previous v2 filepicker api, go here
npm install react-filestack
var ReactFilestack = require('react-filestack');
In ES2015
import ReactFilestack from 'react-filestack';
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} />
Works well with IE...
git clone this project and open index.html You can also see live demo here Link
Official Filestack Documentation
required string. An API key for filestack
optional string. default 'pick'. Look supported modes above.
optional object. use if you need to insert file object for upload mode.
optional object. default false. choose whether to console.log filepicker process
optional function. get result(fpfiles or blob object) after upload is done.
optional function. send error object as callback parameter
optional object. Detailed options for button. See Javascript API of official documentation. Put everything in it if you think you have to
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.
optional string. When using custom button, you can set your own text.
optional string. When using custom button, you can set className to style it.
Please contribute to this package via Pull Request, or you can open Issues!
npm install && npm run build
run index.html
- Zero Cho
- Samuele Zaza
MIT