@digibuffer/file-manager-ui

Complete React UI components for file management with upload, list, move, copy, delete operations.

Features

• ✅ Drag & Drop Upload: Intuitive file upload with progress tracking
• ✅ File Operations: Move, rename, copy, delete files
• ✅ Search & Sort: Search files and sort by name, size, or date
• ✅ Multi-Select: Select and batch delete multiple files
• ✅ Download Files: Generate and download files with one click
• ✅ TypeScript: Full type safety
• ✅ Customizable: Flexible props and styling

Installation

npm install @digibuffer/file-manager-ui @digibuffer/file-manager-core @digibuffer/upload-lib-client

Quick Start

Basic Usage

import { FileManager, FileManagerProvider } from '@digibuffer/file-manager-ui';

function App() {
  return (
    <FileManagerProvider
      config={{
        apiEndpoint: '/api/files',
        uploadEndpoint: '/api/upload',
      }}
    >
      <FileManager prefix="uploads/" />
    </FileManagerProvider>
  );
}

With Custom Configuration

import { FileManager, FileManagerProvider } from '@digibuffer/file-manager-ui';

function App() {
  return (
    <FileManagerProvider
      config={{
        apiEndpoint: '/api/files',
        uploadEndpoint: '/api/upload',
        defaultSource: 'database', // 'storage' | 'database' | 'both'
        headers: {
          Authorization: `Bearer ${token}`,
        },
        onError: (error) => {
          console.error('File manager error:', error);
        },
      }}
    >
      <FileManager
        prefix="user-uploads/"
        showUpload={true}
        allowDelete={true}
        allowRename={true}
        allowMove={true}
        allowDownload={true}
        multiSelect={true}
        onFileUpload={(keys) => console.log('Uploaded:', keys)}
        onFileDelete={(keys) => console.log('Deleted:', keys)}
        onFileSelect={(keys) => console.log('Selected:', keys)}
      />
    </FileManagerProvider>
  );
}

Components

FileManager

Main component that combines all functionality.

Props:

• prefix?: string - File path prefix (e.g., "uploads/")
• source?: DataSource - Data source ('storage' | 'database' | 'both')
• showUpload?: boolean - Show upload zone (default: true)
• allowDelete?: boolean - Allow file deletion (default: true)
• allowRename?: boolean - Allow file renaming (default: true)
• allowMove?: boolean - Allow file moving (default: true)
• allowDownload?: boolean - Allow file downloads (default: true)
• multiSelect?: boolean - Enable multi-select (default: false)
• onFileSelect?: (keys: string[]) => void - File selection callback
• onFileUpload?: (keys: string[]) => void - Upload complete callback
• onFileDelete?: (keys: string[]) => void - Delete complete callback

FileList

Display a list of files.

import { FileList } from '@digibuffer/file-manager-ui';

<FileList
  files={files}
  loading={loading}
  error={error}
  hasMore={hasMore}
  onLoadMore={handleLoadMore}
  onSelect={handleSelect}
  onDelete={handleDelete}
  onDownload={handleDownload}
  multiSelect={true}
/>

UploadZone

Drag-and-drop file upload zone.

import { UploadZone } from '@digibuffer/file-manager-ui';

<UploadZone
  prefix="uploads/"
  accept="image/*,application/pdf"
  maxFiles={10}
  maxFileSize={10 * 1024 * 1024} // 10MB
  onUploadComplete={(keys) => console.log('Uploaded:', keys)}
  onUploadError={(error) => console.error('Upload error:', error)}
/>

Toolbar

File manager toolbar with search and actions.

import { Toolbar } from '@digibuffer/file-manager-ui';

<Toolbar
  selectedCount={selectedCount}
  onRefresh={handleRefresh}
  onSearch={handleSearch}
  onSort={handleSort}
  onBatchDelete={handleBatchDelete}
  sortBy="lastModified"
  sortOrder="desc"
/>

Hooks

useFileList

Hook for listing and managing files.

import { useFileList } from '@digibuffer/file-manager-ui';

function MyComponent() {
  const { data, isLoading, list, loadMore, refresh } = useFileList();

  useEffect(() => {
    list({ prefix: 'uploads/' });
  }, []);

  return (
    <div>
      {data.map((file) => (
        <div key={file.key}>{file.key}</div>
      ))}
      {hasMore && <button onClick={loadMore}>Load More</button>}
    </div>
  );
}

useFileOperations

Hook for file operations.

import { useFileOperations } from '@digibuffer/file-manager-ui';

function MyComponent() {
  const {
    deleteFile,
    deleteBatch,
    move,
    copy,
    rename,
    download,
    isLoading,
  } = useFileOperations();

  const handleDelete = async (key: string) => {
    await deleteFile(key);
  };

  const handleMove = async () => {
    await move({
      sourceKey: 'old/path.pdf',
      destinationKey: 'new/path.pdf',
    });
  };

  return <div>...</div>;
}

Styling

The components use class names that you can style with CSS:

/* File Manager */
.file-manager { }
.file-manager-upload { }
.file-manager-toolbar { }
.file-manager-list { }

/* Upload Zone */
.upload-zone { }
.upload-dropzone { }
.upload-dropzone.dragging { }
.upload-icon { }
.upload-text { }

/* Toolbar */
.toolbar { }
.toolbar-search { }
.search-input { }
.toolbar-btn { }

/* File List */
.file-list { }
.file-list-items { }
.file-list-empty { }
.file-list-loading { }

/* File Item */
.file-item { }
.file-item.selected { }
.file-item-icon { }
.file-item-name { }
.file-item-meta { }
.file-item-actions { }
.file-action-btn { }

Server Setup

You need to set up API endpoints for the file manager:

// app/api/files/route.ts
import { FileManager, createFileManagerRouter } from '@digibuffer/file-manager-core';
import { toRouteHandler } from '@digibuffer/file-manager-core/adapters/next';

const fileManager = new FileManager({
  storage: {
    bucket: process.env.R2_BUCKET!,
    accessKeyId: process.env.R2_ACCESS_KEY_ID!,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
    endpoint: process.env.R2_ENDPOINT!,
  },
  database: {
    connectionString: process.env.DATABASE_URL,
  },
});

const router = createFileManagerRouter({ fileManager });

export const POST = toRouteHandler(router);

License

MIT