Mengli-react-filemanager-connector-node-v1 NPM

Filemanager

Demo

React Documentation

Demo and react documentation are powered by React Showroom

Packages

Detailed documentation for each package is coming soon.

Basic usage

Client implementation is an npm package which can be embed into your application. It uses React framework and supports connectors to different file storages. Predefined connectors are:

You can write you own custom connectors (documentation on how to do it will appear later).

How to use Server Node

Server Node API v1 Documentation

Install package

npm install --save @opuscapita/filemanager-server

Now you have at least two ways of using it:

Start as application

let config = {
  fsRoot: __dirname,
  rootName: 'Root folder',
  port: process.env.PORT || '3020',
  host: process.env.HOST || 'localhost'
};

let filemanager = require('@opuscapita/filemanager-server');
filemanager.server.run(config);

Use as middleware

How to use Client React

Install packages

npm install --save @opuscapita/react-filemanager @opuscapita/react-filemanager-connector-node-v1

Use it as a child component of you application

import React from 'react';
import ReactDOM from 'react-dom';
import { FileManager, FileNavigator } from '@opuscapita/react-filemanager';
import connectorNodeV1 from '@opuscapita/react-filemanager-connector-node-v1';

const apiOptions = {
  ...connectorNodeV1.apiOptions,
  apiRoot: `http://opuscapita-filemanager-demo-master.azurewebsites.net/` // Or you local Server Node V1 installation.
}

const fileManager = (
 <div style={{ height: '480px' }}>
    <FileManager>
      <FileNavigator
        id="filemanager-1"
        api={connectorNodeV1.api}
        apiOptions={apiOptions}
        capabilities={connectorNodeV1.capabilities}
        initialResourceId={'Lw'}
        listViewLayout={connectorNodeV1.listViewLayout}
        viewLayoutOptions={connectorNodeV1.viewLayoutOptions}
      />
    </FileManager>
  </div>
);

ReactDOM.render(fileManager, document.body);