Giter Site home page Giter Site logo

opuscapita / filemanager Goto Github PK

View Code? Open in Web Editor NEW
555.0 33.0 121.0 13.92 MB

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

Home Page: https://demo.core.dev.opuscapita.com/filemanager/master/?currentComponentName=FileManager&maxContainerWidth=100%25&showSidebar=false

License: Apache License 2.0

JavaScript 78.98% HTML 0.15% RAML 2.25% Shell 2.80% Dockerfile 0.15% Makefile 1.08% Less 5.02% Java 9.58%
filemanager react js javascript nodejs file-browser file-upload file-explorer frontend

filemanager's Introduction

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.

filemanager's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

filemanager's Issues

It is possible to upload two and more files with same names (google.drive)

  1. Open file manager;
  2. highlight some file right mouse click;
  3. click on 'Upload' item in pop menu;
  4. select some single file on computer;
  5. reload page;
  6. highlight some file right mouse click;
  7. click on 'Upload' item in pop menu;
  8. select same file which was uploaded;
  9. reload page with file manager.
    Result: two files wit same names are displayed in file manager.
    Expected result: validation message about existing file with same name in current folder appears or uploaded file has changed name (for example numberic index is added in right part of file name).

Implement "ResourcesTree" component

Meta-Info Value
ExtProjectId JCCMMN-01
Original Estimation ???h
Remaining Estimation ???h

This component needs to implement Move to, Copy to and other file operations required to choose destination path.

Similar component from Dropbox (tree only):

screen shot 2018-08-15 at 2 58 23 pm

Refactor `build-api-docs` npm script

I didn't found a good way to pass environment variables to RAML file. Therefore baseUri variable pass to RAML from shell $SERVER_URL env variable using sed.

"build-api-docs": "rm -rf api-docs.tmp && mkdir -p api-docs.tmp/source api-docs.tmp/docs && cp -r docs/api-docs api-docs.tmp/source && sed -i s@__env__baseURI__@$SERVER_URL@g api-docs.tmp/source/api-docs/main.raml && raml2html api-docs.tmp/source/api-docs/main.raml > api-docs.tmp/docs/index.html"

It works OK, but if exists a better way to do it, it would be fine to refactor this code.

It is impossible to download or upload some single file in IE11 (google.drive)

Case 1:

  1. Open file manager in IE11;
  2. highlight some file right mouse click;
  3. click on 'Download' item in pop menu;
    Result: file is not downloaded.

Case 2:

  1. Open file manager in IE11;
  2. highlight some file right mouse click;
  3. click on 'Upload' item in pop menu;
  4. select some single file on computer;
  5. reload page with file manager.
    Result: new file is not uploaded in file manager.

Implement "FileManager" react component

FileManager component is a container for FileNavigator components.

It should also render Toolbar formed by current selected FileNavigator instance.

If two FileNavigators passed as "children" property, it should render split view (later).
Also it should have a left side bar for "places", and TreeView (later).

Adapt UI for touch devices

  • Ensure in correct layout
  • Ensure in correct behavior. Broken "drag-and-drop" for touch devices is allowed.

Implement "row" and "files-view" contexts for "ContextMenu"

Context menu items list should be different depends on context where context-menu called.

Example:

  • "Download", "Delete" and "Rename" should be available for "row" and not for "files-view"
  • "New folder", "Upload" should be available for "files-view" and not for "row"

Add bottom padding for files view (now only for ListView).

Implement client using React

Basic implementation should include:

  • browsing: list files, go to folder, location bar(links)
  • upload file(s)
  • download files(s)
  • delete file(s)
  • create folder

Add i18n support

  • Implement locale property for FileManager and FileNavigator components. Take a look at a similar example

  • Create a file translations.js for connector-node-v1 and connector-google-drive-v2. If we'll have a lot of translations, we'll split these files to the separate files (per locale).

  • Add locale property to the FileNavigator documentation file with a link to the file with available translations for each of connectors.

Please don't use https://github.com/OpusCapita/i18n

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.