@wulzymart/fileman-react

A premium, feature-rich React File Manager component.

Links

• GitHub: https://github.com/wulzymart/fileman-gs

Features

• Multi-Storage Support: Seamless integration with Local and S3 backends.
• File Operations: Copy, Move, Delete, Rename across folders.
• Previews: Built-in support for Images, Videos, Audio, and PDFs.
• Image Editor: Integrated cropping and basic editing features.
• Modern UI: Built with Tailwind CSS and Framer Motion for a premium feel.

Installation

npm install @wulzymart/fileman-react

Basic Usage

Ensure You have the backend running and the apiUrl points to it. The backend server package is found in https://www.npmjs.com/package/@wulzymart/fileman-server

import { ArchiveProvider, FileManager } from "@wulzymart/fileman-react";
import "@wulzymart/fileman-react/dist/index.css";
const apiUrl = "http://localhost:3000/api"; // server enpoint runs with /api

function App() {
  return (
    <ArchiveProvider apiUrl={apiUrl}>
      <FileManager />
    </ArchiveProvider>
  );
}

TypeScript Definitions

FileInfo

export interface FileInfo {
  id: string;
  name: string;
  size: number;
  type: string;
  lastModified: number;
  url: string;
  isFolder?: boolean;
}

FileCategory

export type FileCategory = "image" | "audio" | "video" | "document";

ClipboardItem

export interface ClipboardItem {
  type: "copy" | "cut";
  fileId: string;
  fileName: string;
}

ArchiveContextType

export interface ArchiveContextType {
  files: FileInfo[];
  isLoading: boolean;
  error: string | null;
  currentPath: string;
  clipboard: ClipboardItem | null;
  setCurrentPath: (path: string) => void;
  uploadFile: (
    file: File | Blob,
    name?: string,
    targetPath?: string,
  ) => Promise<FileInfo>;
  uploadFromUrl: (url: string) => Promise<FileInfo>;
  deleteFile: (id: string) => Promise<void>;
  createFolder: (name: string) => Promise<FileInfo>;
  copyFile: (id: string, name: string) => void;
  cutFile: (id: string, name: string) => void;
  pasteFile: (targetPath?: string) => Promise<void>;
  moveFile: (id: string, targetPath: string) => Promise<void>;
  refresh: () => Promise<void>;
  apiUrl: string;
}

Components & Props

ArchiveProvider

Context provider for file state management. Must wrap any other components.

export interface ArchiveProviderProps {
  apiUrl?: string; // e.g. "/api" or "http://localhost:3000/api"
  children: React.ReactNode;
}

FileManager

The main explorer interface. Renders the full folder tree, breadcrumbs, search, and file grid. No props required.

FileSelector

A modal for selecting files from the archive.

interface FileSelectorProps {
  isOpen: boolean;
  onClose: () => void;
  onSelect: (files: FileInfo[]) => void;
  multiple?: boolean;
  title?: string;
  fileTypes?: FileCategory[];
  modal?: boolean; // Set to false to render inline (e.g. inside Shadcn Dialog)
  className?: string;
}

FileUploader

Drag-and-drop upload component.

export interface FileUploaderProps {
  handleUploadedFiles?: (files: FileInfo[]) => void;
  fileTypes?: FileCategory[];
  path?: string; // specific path to upload to
  className?: string;
}