DOCSEARCHbyAlgolia
Submit Docs

React File Manager

repository·main·Indexed 41 days ago

https://github.com/saifullah-dev/react-file-manager

An open-source React.js package providing a complete UI for managing files and folders. It supports grid and list views, multi-selection, and operations such as uploading, downloading, deleting, and moving files. The package includes a reference backend implementation with a RESTful API, Swagger documentation, and MongoDB integration.

Tokens
8.7K
Snippets
33
Records
39
Agent score
100%

What's inside React File Manager

  1. Handle and control the current file path

    main

    The FileManager starts at the root directory ("") by default. You can manage navigation using the following methods:

    Set an initial path

    Use the initialPath prop to specify the starting directory (e.g., /Documents). Note that initialPath is only applied once when the files state is first initialized.

    Controlled path navigation

    To track and control the current folder (e.g., to sync with your application's state), pair initialPath with the onFolderChange callback. This allows you to keep the path in sync with user navigation.

    Important: After initialization, folder changes are driven by onFolderChange, not initialPath.

    import { useState } from "react";

function App() {
  const [currentPath, setCurrentPath] = useState("/Documents");

  return (
    <FileManager
      // other props...
      initialPath={currentPath}
      onFolderChange={setCurrentPath}
    />
  );
}

  3. Install and set up the File Manager Backend

    main

    To use the File Manager Backend, you must first clone the repository, navigate to the backend directory, and install the dependencies using npm. You will also need to create a .env file based on the provided .env.example to configure your environment variables.

    # Clone the repository
git clone https://github.com/Saifullah-dev/react-file-manager.git

# Navigate to the backend directory
cd backend

# Install dependencies
npm i

  4. Access and generate API documentation

    main

    The backend uses Swagger for API documentation.

    1. Generate Docs: Run npm run genDocs to generate the Swagger documentation files.
    2. View Docs: Once the server is running, access the interactive documentation at http://localhost:3000/api-docs/ to view all available endpoints, request formats, and response schemas.
    npm run genDocs

  5. Run the reference implementation (Frontend, Backend, and Database)

    main

    The repository includes a reference implementation. To run the full stack locally:

    1. Clone the repository

    git clone https://github.com/Saifullah-dev/react-file-manager.git
cd react-file-manager

    2. Start the Frontend

    cd frontend
npm i
npm run dev

    Running on http://localhost:5173.

    3. Start the Backend

    cd backend
npm i
npm run devStart

    Running on http://localhost:3000.

    4. Configure MongoDB

    • Ensure MongoDB is running on the default port 27017.
    • Create a database named fileManagerDB (or check backend/.env for the specific name).
    • Refer to backend/.env.example for configuration details.
    # Frontend setup
cd frontend
npm i
npm run dev

# Backend setup
cd backend
npm i
npm run devStart

  6. Use keyboard shortcuts in FileManager

    main

    The FileManager component supports several keyboard shortcuts for efficient file management and navigation:

    ActionShortcut
    New FolderAlt + Shift + N
    Upload FilesCTRL + U
    CutCTRL + X
    CopyCTRL + C
    PasteCTRL + V
    RenameF2
    DownloadCTRL + D
    DeleteDEL
    Select All FilesCTRL + A
    Select Multiple FilesCTRL + Click
    Select Range of FilesShift + Click
    Switch to List LayoutCTRL + Shift + 1
    Switch to Grid LayoutCTRL + Shift + 2
    Jump to First File in the ListHome
    Jump to Last File in the ListEnd
    Refresh File ListF5
    Clear SelectionEsc

  7. Run the File Manager Backend server

    main

    You can start the backend server using two different commands depending on your development needs:

    1. Development Mode: Use npm run devStart to run the server with nodemon, which automatically restarts the server on code changes.
    2. Standard Mode: Use npm run start if you are testing file rename functionality to avoid potential rename permission issues.

    The server runs on http://localhost:3000 by default.

    # For development with auto-reload
npm run devStart

# For testing file rename functionality
npm run start

  9. Basic usage of the FileManager component

    main

    To use the FileManager, import the FileManager component and its associated CSS. You must provide a files prop, which is an array of file and folder objects.

    Note: You must import @cubone/react-file-manager/dist/style.css for the component to render correctly.

    import { useState } from "react";
import { FileManager } from "@cubone/react-file-manager";
import "@cubone/react-file-manager/dist/style.css";

function App() {
  const [files, setFiles] = useState([
    {
      name: "Documents",
      isDirectory: true,
      path: "/Documents",
      updatedAt: "2024-09-09T10:30:00Z",
    },
    {
      name: "Pictures",
      isDirectory: true,
      path: "/Pictures",
      updatedAt: "2024-09-09T11:00:00Z",
    },
    {
      name: "Pic.png",
      isDirectory: false,
      path: "/Pictures/Pic.png",
      updatedAt: "2024-09-08T16:45:00Z",
      size: 2048,
    },
  ]);

  return (
    <>
      <FileManager files={files} />
    </>
  );
}

export default App;

  10. Configure UI Layout and Appearance

    main

    Customize the visual presentation of the FileManager using these props:

    • layout: Set the default view to either "list" or "grid" (default: "grid").
    • primaryColor: Set the theme color (e.g., 'blue', '#E97451'). Default is #6155b4.
    • fontFamily: Set the CSS font family (e.g., 'Roboto'). Default is 'Nunito Sans, sans-serif'.
    • height / width: Set dimensions using strings (e.g., '100%', '10rem') or numbers (pixels). Defaults: height: 600px, width: 100%.
    • collapsibleNav: Enables a collapsible left navigation pane. If true, use defaultNavExpanded (boolean) to set the initial state.

  11. Implement a custom file preview component

    main

    To customize how files are previewed, use the filePreviewComponent prop. This prop accepts a callback function that receives the selected file object as an argument. The function must return a valid React node, JSX element, or HTML.

    const CustomImagePreviewer = ({ file }) => {
  return <img src={`${file.path}`} alt={file.name} />;
};

<FileManager
  // Other props...
  filePreviewComponent={(file) => <CustomImagePreviewer file={file} />}
/>;

  12. Set the Display Language

    main

    The language prop allows you to set the translation language for the component. It accepts standard language codes.

    Supported codes include:

    • ar-SA (Arabic)
    • da-DK (Danish)
    • de-DE (German)
    • en-US (English)
    • es-ES (Spanish)
    • fa-IR (Persian)
    • fi-FI (Finnish)
    • fr-FR (French)
    • he-IL (Hebrew)
    • hi-IN (Hindi)
    • it-IT (Italian)
    • ja-JP (Japanese)
    • ko-KR (Korean)
    • nb-NO (Norwegian)
    • pt-BR (Portuguese, Brazil)
    • pt-PT (Portuguese, Portugal)
    • ru-RU (Russian)
    • sv-SE (Swedish)
    • tr-TR (Turkish)
    • uk-UA (Ukrainian)
    • ur-UR (Urdu)
    • vi-VN (Vietnamese)
    • zh-CN (Chinese, Simplified)
    • pl-PL (Polish)