thedevelobear / filemanager

React based FileManager for browser ( + FS REST API for Node.js and Express)

Filemanager

Demo

Sorry for missing 🌎 SSL cert at demo site. We'll fix it 🔜

React Documentation

Demo and react documentation are powered by React Showroom

Packages

• Client React
• Server Node
• Client React connector for Server Node API v1
• Client React connector for Google Drive API v2

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:

• Client React connector for Server Node API v1
• Client React connector for Google Drive API v2

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);

Changelog

Code of Conduct

Contributing Guide

Main contributors

	Alexey Sergeev
	Kirill Volkovich
	Andrei Mourzenkov
	Aleksandr Baliunov
	Egor Stambakio

License

Licensed under the Apache License, Version 2.0. See LICENSE for the full license text.