/filemanager

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

Primary LanguageJavaScriptApache License 2.0Apache-2.0

Filemanager

badge-circleci badge-npm badge-license

Demo and react documentation are powered by React Showroom

Packages

Detailed documentation for each package is coming soon.

Spring Boot Starter

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

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

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

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.