Codementor Events

FileStack upload in React Js

Published Jun 01, 2019
FileStack upload in React Js

Here is how i integerated Filestack in React.

Step 1
Install filestack-react module

npm install --save filestack-react

More details on this module...
https://www.npmjs.com/package/filestack-react

Step 2
Assuming you’ve already got a React app you’re working on, you’ll just need to install the packages and imprt the client component

import { client } from 'filestack-react';

Step3
Provide the filestack settings options

const options = {
  accept: 'image/*',
  //fromSources: ['local_file_system'],
  maxSize: 1024 * 1024,
  maxFiles: 1,
  onFileUploadFinished: this.setcanvasBG
}

Pls refer this link for more details on the file picker options
https://www.filestack.com/docs/concepts/pickers/web/

Step 4
Initialize and invoke the file picker with the options

const filestack_apikey = "*****"; //replace with your api key
const filestack = client.init(filestack_apikey, options);
const picker = filestack.picker(options);
picker.open();
Discover and read more posts from Frederic Anand
get started