react component for filepicker(a.k.a filestack)
npm install react-filepickerThis is for v2 old filepicker api. If you want latest v3 filestack api, go here
Live Demo
NPM
Github
``
npm install react-filepickerImport
var ReactFilepicker = require('react-filepicker');
In ES2015
import ReactFilepicker from 'react-filepicker';Usage
You should register for Filestack(filepicker) and get an API key first!
Default FileStack widget
`
Custom Designed button
`
Other mode than 'pick'
`
Available modes:
* convert
* export
* pickAndStore
* pickMultiple (Instead, you can use pick mode and put 'multiple: true' in options object)
* read
* store
* storeUrl
* write
* writeUrl
* stat
make your own options and callback function, connect it to the component and get the results(either fpfiles or blob object)
`
const options = {
buttonText: 'Pick Me',
buttonClass: 'filepicker',
mimetype: 'image/*',
container: 'window',
services: ['COMPUTER', 'FACEBOOK', 'CLOUDAPP']
};
yourCallbackFunction(fpfiles) {
// handle fpfiles or blob object
}
Link instead of button
if you want a custom button to be a link, just put link props
`
> ### apikey
> required string. An API key for filestack
> ### defaultWidget
> optional boolean. default true. choose between the default widget and the custom button
> ### mode
> optional string. default 'pick'. options ['pick', 'dragdrop', 'convert', 'export']. convert and export modes are for custom button.
> ### blob
> optional object. use if you need to insert blob object for convert, export, stat, write or writeUrl mode.
> ### input
> optional object. use this for read, store, storeUrl or write 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
> ### onProgress
> optional function. send progress 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
> ### buttonText
> optional string. When using custom button, you can set your own text. It is included in options prop(as options.buttonText), so use only when it's necessary.
> ### buttonClass
> optional string. When using custom button, you can set className. It is included in options prop(as options.buttonClass), so use only when it's necessary.
npm install && npm run build
run index.html