npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cubone/react-file-manager

v1.13.0

Published

React File Manager is an open-source, user-friendly component designed to easily manage files and folders within applications. With smooth drag-and-drop functionality, responsive design, and efficient navigation, it simplifies file handling in any React p

Downloads

1,014

Readme

React File Manager

NPM Downloads npm bundle size NPM Version

✨ Features

  • File & Folder Management: View, upload, download, delete, copy, move, create, and rename files or folders seamlessly.
  • Grid & List View: Switch between grid and list views to browse files in your preferred layout.
  • Navigation: Use the breadcrumb trail and sidebar navigation pane for quick directory traversal.
  • Toolbar & Context Menu: Access all common actions (upload, download, delete, copy, move, rename, etc.) via the toolbar or right-click for the same options in the context menu.
  • Multi-Selection: Select multiple files and folders at once to perform bulk actions like delete, copy, move, or download.
  • Keyboard Shortcuts: Quickly perform file operations like copy, paste, delete, and more using intuitive keyboard shortcuts.
  • Drag-and-Drop: Move selected files and folders by dragging them to the desired directory, making file organization effortless.

React File Manager

🚀 Installation

To install React File Manager, use the following command:

npm i @cubone/react-file-manager

💻 Usage

Here’s a basic example of how to use the File Manager Component in your React application:

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, // Folder
      path: "/Documents", // Located in Root directory
      updatedAt: "2024-09-09T10:30:00Z", // Last updated time
    },
    {
      name: "Pictures",
      isDirectory: true,
      path: "/Pictures", // Located in Root directory as well
      updatedAt: "2024-09-09T11:00:00Z",
    },
    {
      name: "Pic.png",
      isDirectory: false, // File
      path: "/Pictures/Pic.png", // Located inside the "Pictures" folder
      updatedAt: "2024-09-08T16:45:00Z",
      size: 2048, // File size in bytes (example: 2 KB)
    },
  ]);

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

export default App;

📂 File Structure

The files prop accepts an array of objects, where each object represents a file or folder. You can customize the structure to meet your application needs. Each file or folder object follows the structure detailed below:

type File = {
  name: string;
  isDirectory: boolean;
  path: string;
  updatedAt?: string; // Optional: Last update timestamp in ISO 8601 format
  size?: number; // Optional: File size in bytes (only applicable for files)
};

⚙️ Props

| Name | Type | Description | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | acceptedFileTypes | string | (Optional) A comma-separated list of allowed file extensions for uploading specific file types (e.g., .txt, .png, .pdf). If omitted, all file types are accepted. | | enableFilePreview | boolean | A boolean flag indicating whether to use the default file previewer in the file manager default: true. | | filePreviewPath | string | The base URL for file previews e.g.https://example.com, file path will be appended automatically to it i.e. https://example.com/yourFilePath. | | fileUploadConfig | { url: string; headers?: { [key: string]: string } } | Configuration object for file uploads. It includes the upload URL (url) and an optional headers object for setting custom HTTP headers in the upload request. The headers object can accept any standard or custom headers required by the server. Example: { url: "https://example.com/fileupload", headers: { Authorization: "Bearer" + TOKEN, "X-Custom-Header": "value" } } | | files | Array<File> | An array of file and folder objects representing the current directory structure. Each object includes name, isDirectory, and path properties. | | height | string | number | The height of the component default: 600px. Can be a string (e.g., '100%', '10rem') or a number (in pixels). | | isLoading | boolean | A boolean state indicating whether the application is currently performing an operation, such as creating, renaming, or deleting a file/folder. Displays a loading state if set true. | | layout | "list" | "grid" | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid". | | maxFileSize | number | For limiting the maximum upload file size in bytes. | | onCreateFolder | (name: string, parentFolder: File) => void | A callback function triggered when a new folder is created. Use this function to update the files state to include the new folder under the specified parent folder using create folder API call to your server. | | onDelete | (files: Array<File>) => void | A callback function is triggered when one or more files or folders are deleted. | | onDownload | (files: Array<File>) => void | A callback function triggered when one or more files or folders are downloaded. | | onError | (error: { type: string, message: string }, file: File) => void | A callback function triggered whenever there is an error in the file manager. Where error is an object containing type ("upload", etc.) and a descriptive error message. | | onFileOpen | (file: File) => void | A callback function triggered when a file or folder is opened. | | onFileUploaded | (response: { [key: string]: any }) => void | A callback function triggered after a file is successfully uploaded. Provides JSON response holding uploaded file details, use it to extract the uploaded file details and add it to the files state e.g. setFiles((prev) => [...prev, JSON.parse(response)]); | | onFileUploading | (file: File, parentFolder: File) => { [key: string]: any } | A callback function triggered during the file upload process. You can also return an object with key-value pairs that will be appended to the FormData along with the file being uploaded. The object can contain any number of valid properties. | | onLayoutChange | (layout: "list" | "grid") => void | A callback function triggered when the layout of the file manager is changed. | | onPaste | (files: Array<File>, destinationFolder: File, operationType: "copy" | "move") => void | A callback function triggered when when one or more files or folders are pasted into a new location. Depending on operationType, use this to either copy or move the sourceItem to the destinationFolder, updating the files state accordingly. | | onRefresh | () => void | A callback function triggered when the file manager is refreshed. Use this to refresh the files state to reflect any changes or updates. | | onRename | (file: File, newName: string) => void | A callback function triggered when a file or folder is renamed. | | width | string | number | The width of the component default: 100%. Can be a string (e.g., '100%', '10rem') or a number (in pixels). |

⌨️ Keyboard Shortcuts

| Action | Shortcut | | ------------------------------ | ------------------ | | New Folder | Alt + Shift + N | | Upload Files | CTRL + U | | Cut | CTRL + X | | Copy | CTRL + C | | Paste | CTRL + V | | Rename | F2 | | Download | CTRL + D | | Delete | DEL | | Select All Files | CTRL + A | | Select Multiple Files | CTRL + Click | | Select Range of Files | Shift + Click | | Switch to List Layout | CTRL + Shift + 1 | | Switch to Grid Layout | CTRL + Shift + 2 | | Jump to First File in the List | Home | | Jump to Last File in the List | End | | Refresh File List | F5 | | Clear Selection | Esc |

🤝 Contributing

Contributions are welcome! To contribute:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/branch-name).
  3. Make your changes.
  4. Commit your changes (git commit -m 'Add some feature').
  5. Push to the branch (git push origin feature/branch-name).
  6. Open a Pull Request.

Get started by running following commands:

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

Frontend

cd frontend
npm i
npm run dev

The application should now be running on http://localhost:5173.

Backend

cd backend
npm i
npm run devStart

The server should now be running on http://localhost:3000, have fun!

©️ License

React File Manager is MIT Licensed.