OpusCapita / filemanager

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

Filemanager

Demo

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.

Spring Boot Starter

Spring boot applications can benefit from Spring boot starter package found here:

• Spring Boot - see README there for details

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}
        listViewLayout={connectorNodeV1.listViewLayout}
        viewLayoutOptions={connectorNodeV1.viewLayoutOptions}
      />
    </FileManager>
  </div>
);

ReactDOM.render(fileManager, document.body);

Changelog

Code of Conduct

Contributing Guide

Development

In any directory with Makefile (including repo's root) type make to see available commands (requires make utility to be installed locally, ideally GNU MAKE 4.2.1).

There're prebuilt docker images with tools needed for building code and deploying demo application:

make container-for-code # starts a container, where one can execute 'make' to test/build/etc code (both for JS and Spring boot parts)
// or
make container-for-deployment # starts a container, where one can execute 'make' with goals related to deployment of demo application

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.