React File Manager

React-компонент файлового менеджера для работы с изображениями с гибкой настройкой API.

Установка

npm install @your-org/react-file-manager

Быстрый старт

import { FileManagerApp } from '@your-org/react-file-manager';
import '@your-org/react-file-manager/dist/file-manager.css';

function App() {
  // Настройка API эндпоинтов
  const apiEndpoints = {
    getFolders: '/api/folders',
    getFiles: '/api/files',
    addFile: '/api/files',
    deleteFile: '/api/files',
    createFolder: '/api/folders',
  };

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <FileManagerApp apiEndpoints={apiEndpoints} sortBySize="name" searchQuery="" />
    </div>
  );
}

Вкладка иконок (Lucide)

Наборы Lucide и Tabler Icons подключаются как данные Iconify (@iconify-json/lucide, @iconify-json/tabler, @iconify/utils): поиск и SVG выполняются в браузере, ключи API и прокси не нужны. Экспорт в рассылку идёт как PNG через клиентскую растеризацию.

API

FileManagerApp

Основной компонент файлового менеджера.

Пропсы

| Параметр | Тип | Описание | Обязательный | |--------------|------------|-----------------------------------------|--------------| | apiEndpoints | object | Объект с API эндпоинтами | Да | | sortBySize | string | Поле для сортировки по умолчанию | Нет | | searchQuery | string | Начальный поисковый запрос | Нет | | onPathChange | function | Коллбэк при изменении пути | Нет | | config | object | Дополнительные настройки UI и поведения | Нет |

Поле config.sortOptions

Белый список вариантов сортировки в дропдауне списка файлов. Тип: SortOptionType[] ( 'date-desc' \| 'date-asc' \| 'size-desc' \| 'size-asc' \| 'name-asc' \| 'name-desc' \| 'type-asc').

• Если sortOptions не задан или передан пустой массив — в UI показываются все стандартные варианты.
• Если задан непустой массив — в дропдауне только перечисленные значения (удобно, если бэкенд не поддерживает часть полей sortBy / sortOrder).

Пример:

<FileManagerApp
  dataProviders={dataProviders}
  config={{
    sortOptions: ['date-desc', 'date-asc', 'name-asc', 'name-desc'],
  }}
/>

Порядок пунктов в списке совпадает с порядком в полном наборе опций (см. константу ALL_SORT_OPTIONS в пакете).

Структура apiEndpoints

{
  getFolders: string; // GET запрос для получения папок
  getFiles: string; // GET запрос для получения файлов
  addFile: string; // POST запрос для загрузки файла
  deleteFile: string; // DELETE запрос для удаления файла
  createFolder: string; // POST запрос для создания папки
}

Формат данных

Получение папок (getFolders)

Ожидаемый ответ от сервера:

{
  "folders": [
    {
      "id": "1",
      "name": "Папка 1",
      "parentId": null
    },
    {
      "id": "2",
      "name": "Подпапка 1",
      "parentId": "1"
    }
  ]
}

Получение файлов (getFiles)

Ожидаемый ответ от сервера:

{
  "files": [
    {
      "id": "1",
      "name": "image.jpg",
      "size": "1.2MB",
      "date": "2023-11-01",
      "folderId": "1",
      "type": "image/jpeg",
      "thumbnail": "data:image/jpeg;base64,..."
    }
  ]
}

Загрузка файла (addFile)

Отправляемые данные:

{
  "name": "image.jpg",
  "size": "1.2MB",
  "date": "2023-11-01",
  "folderId": "1",
  "type": "image/jpeg",
  "thumbnail": "data:image/jpeg;base64,...",
  "dimensions": "800x600",
  "aspectRatio": "1.33",
  "extension": "jpg"
}

Создание папки (createFolder)

Отправляемые данные:

{
  "name": "Новая папка",
  "parentId": "1"
}

Продвинутое использование

Использование отдельных компонентов

Вы можете использовать отдельные компоненты для кастомизации интерфейса:

import { FolderSidebar, FileContent, useFileManager } from '@your-org/react-file-manager';

function CustomFileManager() {
  const apiEndpoints = {
    getFolders: '/api/folders',
    getFiles: '/api/files',
    addFile: '/api/files',
    deleteFile: '/api/files',
    createFolder: '/api/folders',
  };

  const fileManager = useFileManager({
    apiEndpoints,
    searchQuery: '',
    sortBySize: 'name',
  });

  return (
    <div style={{ display: 'flex', height: '100%' }}>
      <div style={{ width: '250px' }}>
        <FolderSidebar
          selectedFolder={fileManager.selectedFolder}
          generateMenuItems={fileManager.generateMenuItems}
          onFolderSelect={fileManager.handleFolderSelect}
          folders={fileManager.folders}
          setPathHistory={fileManager.setPathHistory}
          fetchFiles={fileManager.fetchFiles}
          handleAddFile={fileManager.handleAddFile}
          setIsUrlModalVisible={fileManager.setIsUrlModalVisible}
        />
      </div>
      <div style={{ flex: 1 }}>
        <FileContent
          files={fileManager.files}
          selectedFolder={fileManager.selectedFolder}
          pathHistory={fileManager.pathHistory}
          loading={fileManager.loading}
          handleItemClick={fileManager.handleItemClick}
          handleBreadcrumbClick={fileManager.handleBreadcrumbClick}
          handleDeleteFile={fileManager.handleDeleteFile}
          showRenameModal={fileManager.showRenameModal}
          filteredItems={fileManager.filteredItems}
          setSearchTerm={fileManager.setSearchTerm}
          searchTerm={fileManager.searchTerm}
          handleDroppedFiles={fileManager.handleDroppedFiles}
        />
      </div>
    </div>
  );
}

Интеграция с Mock API

Для тестирования можно использовать локальный Mock API:

import { FileManagerApp } from '@your-org/react-file-manager';

function App() {
  // Настройка Mock API
  const apiEndpoints = {
    getFolders: 'https://mockapi.io/api/v1/folders',
    getFiles: 'https://mockapi.io/api/v1/files',
    addFile: 'https://mockapi.io/api/v1/files',
    deleteFile: 'https://mockapi.io/api/v1/files',
    createFolder: 'https://mockapi.io/api/v1/folders',
  };

  return <FileManagerApp apiEndpoints={apiEndpoints} />;
}

Особенности и ограничения

1. Файловый менеджер работает только с изображениями (jpg, jpeg, png, gif, webp, svg, bmp)
2. Поддерживает загрузку изображений:
   • С локального компьютера
   • По URL
   • Перетаскиванием (drag-and-drop)
3. Возможность переименования файлов
4. Древовидная структура папок
5. Просмотр изображений
6. Фильтрация по имени файла

Требования

• React 16.8.0 или выше
• Ant Design 4.0.0 или выше

Лицензия

MIT