@wulzymart/fileman-react

A premium, feature-rich React File Manager component.

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";

function App() {
  return (
    <ArchiveProvider apiUrl="/api" headers={{ Authorization: "Bearer " + "" }}>
      <FileManager />
    </ArchiveProvider>
  );
}

Components

• FileManager: The main explorer interface.
• FileSelector: A modal for selecting files from the archive.
• FileUploader: Drag-and-drop upload component.
• ArchiveProvider: Context provider for file state management.

Props

ArchiveProvider

• apiUrl: string - The base URL of the server
• headers: Record<string, string> - Additional headers to be sent with requests to control authentication and other headers. as set in your backend

FileSelector

• isOpen: boolean - Controls the visibility of the modal
• onClose: () => void - Callback function to close the modal
• onSelect: (files: FileInfo[]) => void - Callback function to handle file selection
• multiple?: boolean - Whether to allow multiple file selection
• title?: string - The title of the modal
• fileTypes?: FileCategory[] - Filters the files to display

FileUploader

• handleUploadedFiles?: (files: FileInfo[]) => void - Callback function to handle uploaded files
• fileTypes?: FileCategory[] - Filters the files to display
• path?: string - The path to upload files to
• className?: string - Additional CSS classes to apply to the component