About web-file-manager

A React and TypeScript file manager component designed for web applications. It provides multiple view modes including list and grid layouts, with drag-and-drop support for organizing and reordering files and folders. The component features extensibility through custom rendering callbacks for views and right-click context menus, allowing developers to tailor the interface to their needs. Files are passed in as a file map data structure, enabling flexible integration with custom backends or static data. Suitable for building browser-based file explorers, document management systems, or any application requiring a familiar file management UI within a React project.

w

Published by

wx-chevalier

Visit View Profile

README.md

View on GitHub

fc-file-manager

文件截图

Feature

能提供列表、网格等多种视图。
提供拖拽放入、排序等功能。
提供扩展接口：视图渲染回调、右击工具菜单渲染回调。

Usage

import { dummyFileSystem } from './dummyFileSystem';

export default function Simple() {
  return <UfFileManager fileMap={dummyFileSystem} />;
}

About

Roadmap

[ ] 允许传入自定义的渲染函数
[ ] 使用 react-beautiful-dnd 添加拖拽功能

Motivation & Credits

File Manager

el-file #Project#: The Elf file manager is the latest. My motivation throughout has partly been that few Linux tools have the kind of rich UI you can build today with tools like Angular and Material Design.
electron-quasar-file-explorer #Project#: A Simple File Explorer using Vue/Quasar/Electron
JumpFm #Project#: A file manager that lets you jump.
filemanager #Project#: React based FileManager for browser ( + FS REST API for Node.js and Express)
file-system-react #Project#: File System UI in Web using react.

File Preview

wopihost #Project#: 基于 wopi 协议开发的 WopiHost , 支持 word, excel，ppt, pdf(仅支持预览)等文档的预览和编辑。

web-file-manager