React-Filestack Package is Here – And You Will Love It!

The first half of 2017 has been an exciting time for Filestack. In March, we launched the V3 File Picker to enthusiastic community feedback. Now, we are releasing a React Filestack package for our React lovers to easily adopt the V3 File Picker.

The new V3 File Picker offers fast uploads from cloud sources, a streamlined UI, and embed transformations to crop, resize, filter and otherwise edit images, and more. To learn more about what makes the V3 File Picker an awesome, end-to-end content management solution, see our post Filestack Launches File Picker V3.

From a web developer point of view, the V3  File Picker excels in many ways:

First of all, the client functions such as pick return promises which make the code suitable for async/await handlers. Secondly, the client filestack-js is now available through npm making it suitable for modular development with any modern front-end framework/library.

Even more exciting, the react-filestack package is our new community-driven module that make the integration with React easier than ever. We don’t just welcome your PR but we are eager to take your suggestions in the open issues section.

In the next section I will show you the package in action!

A special thanks goes to zerocho who created the original package.

React-Filestack in Action

The component is available through npm command

npm install --save react-filestack

and can be imported via

import ReactFilestack from 'react-filestack'

So, we have a fully customizable React component that accepts props.

Let’s see an example.

Upload A File with Pick

First Attempt

Let’s say we want to let users upload pictures and log the Filestack response in the console.

This is what we need to pass as props:

• API key: apiKey={YOUR_API_KEY}
• pick function by defining mode={'pick'}.
• onSuccess callback onSuccess={(response) => console.log(response)}.
• onError to handle the errors onError={(e) => console.log(error)}.
• A text value for the button buttonText={'Pick file'}.

Thus, the final code is a component with 4 props:

<ReactFilestack 
  apiKey={YOUR_API_KEY}
  mode={'pick'}
  onSuccess={(response) => console.log(response)}
  onError={(e) => console.log(e)}
  buttonText={'Pick File'}
/>

It does look very easy… But what if I told you there is an even faster way?

Optimized Solution

While apiKey is a required the latter ones are not and their default values are defined within /src/ReactFilestack.jsx:

static defaultProps = {
  ...
  onSuccess: result => console.log(result),
  onError: error => console.error(error),
  mode: 'pick',
  buttonText: 'Pick file',
  ...
}

Their values are exactly what we are looking for so we can simply achieve the same result by writing:

<ReactFilestack apiKey={YOUR_API_KEY} />

Props List

If you are curious about all the props available here you can find the full list:

• apiKey: Required API key for Filestack.
• mode: String to define the specific function to call.
• file: File object to pass when mode is upload.
• onSuccess: Callback function to run when the promise resolves.
• onError: Callback function to run when the promise rejects.
• options: Object to customize the client function behavior.
• security: 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: String to set a specific text for the button.
• buttonClass: When using a custom button, you can set the className to style it.

Read More →