@softimist/filemanager

A comprehensive file manager component for React applications with support for file uploads, organization, and management.

Features

• 📁 File and folder management
• 📤 Multiple upload sources (drag & drop, webcam, screen capture, remote sources)
• 🎨 Customizable UI components
• 🌳 Tree view navigation
• 📋 List and grid view modes
• ✂️ Image cropping
• 🔍 File preview
• 📱 Responsive design

Installation

npm install @softimist/filemanager

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom @tanstack/react-query nuqs

Usage

Basic Setup

import { FileManager, FileManagerProvider } from '@softimist/filemanager';

function App() {
  return (
    <FileManagerProvider
      config={{
        apiClient: yourApiClient,
        assetBaseUrl: 'https://your-cdn.com',
      }}
    >
      <FileManager />
    </FileManagerProvider>
  );
}

Using the Dialog Component

import { FileManagerDialog } from '@softimist/filemanager';

function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <FileManagerDialog
      open={open}
      onOpenChange={setOpen}
      onSelect={(files) => {
        console.log('Selected files:', files);
      }}
    />
  );
}

Custom Configuration

import { FileManagerProvider, type FileManagerConfig } from '@softimist/filemanager';

const config: FileManagerConfig = {
  apiClient: yourApiClient,
  assetBaseUrl: 'https://your-cdn.com',
  components: {
    // Customize components as needed
  },
};

<FileManagerProvider config={config}>
  <FileManager />
</FileManagerProvider>

API

See the package exports in src/index.ts for available components, hooks, and utilities.

License

MIT