React File Manger

Multi-column File Manager based on react-beautiful-dnd.

Live Demo

Install

yarn add react-file-manager

Build

yarn lib

Usage

See Example App

You can also check out a Real world app using this file mangager to upload files on server (NodeJS, Express, MongoDB, GraphQL...)

API

| Name | Type | Default | Required | Description | | :----------:| :-------------: | :-----------------: | :----------:| :------------:| | map | Files object. See Example Mandatory fields : "id", "children", "parent" | None | true | normalized data map (You can use easily setup a normalizr schema. | | rootId | Number | None | true | Id of root folder | | onChange | Object => void | None | true | Triggered when file structure changes | | onChangeRow | (itemId, source, destination) => void | (a,b,c) => {} | false | Triggered when item change of row | | onChangeColumn | (itemId, source, destination) => void | (a,b,c) => {} | false | Triggered when item change of column | | onOutsideDrop | (itemId, files) => void | (a,b) => {} | false | Triggered when files from outside are dropped into a column | | dropzoneConfig| object | {} | false | react-dropzone config | | renderItem | Object => React.Element | React.Element | false | Selected item rendering | | renderPreview | Object => React.Element | React.Element | false | Selected item preview rendering | | itemSelectedColor | String | '#1a53ff' | false | Item Selected color | | dropBackgroundColor | String | '#cccdce' | false | Drop column background color |

TODO

• [ ] Add tests
• [x] Extended version as default

All contributions are welcome.