8base-file-manager

This package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with 8base

Installation

You can install the package via yarn | npm:

yarn add @8base/file-manager
npm install @8base/file-manager --save

Usage

1- Import the package using the following snippet when you want to use it in your project.

import { FileInput } from '@8base/file-manager';

2- Create a new instance of the FileManager class and pass an object with the required configuration parameters. The available options are:

Option	Type	Description
apiKey	string	Your 8base API key, can be found in your profile
workspace	number	The workspace id of the app you want to upload files to
environment	string	the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0)
useFilestack	boolean	Set this option to true if you want to use filestack as a storage provider
useS3	boolean	Set this option to true if you want to use AWS S3 service as a storage provider (default: false)
maxFiles	string	Number of files that can be uploaded at once
value	string	value for the input field
onChange	function	callback function when file is selected

3- You must have a apollo provider in your app.jsx or index.jsx to use this package:

const API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'

// Create a middleware that adds the API token to the request headers
const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',
    },
  };
});

const httpLink = createHttpLink({
  uri: `https://api.8base.com/<your-workspace-id>`,
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={ client }>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Important Notes

• You must pass the apiKey to your app in order for this package to work.
• You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).
  • If you don't have any workspace, create one and then go to the settings page and add a new app service:
  • File Storage