# mui-file-manager

> install

Latest version **2.0.0** (published 2024-09-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install mui-file-manager
pnpm add mui-file-manager
yarn add mui-file-manager
bun add mui-file-manager
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2024-09-26 |
| First published | 2023-06-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 764.2 KB |
| Known vulnerabilities | 0 (+8 in 1 direct dependencies) |
| Install scripts | no |
| Author | Sobhan Esfandiary |
| Maintainers | sobhan_esfandiary |

## Links

- npm: https://www.npmjs.com/package/mui-file-manager
- npm.io page: https://npm.io/package/mui-file-manager

## Dependencies (10)

- [vite](https://npm.io/package/vite.md) ^5.4.8
- [react](https://npm.io/package/react.md) ^18.3.1
- [@mui/lab](https://npm.io/package/@mui/lab.md) 6.0.0-beta.10
- [react-dom](https://npm.io/package/react-dom.md) ^18.3.1
- [@mui/material](https://npm.io/package/@mui/material.md) ^6.1.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.13.0
- [mui-file-dropzone](https://npm.io/package/mui-file-dropzone.md) ^4.0.2
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^6.1.1
- [vite-tsconfig-paths](https://npm.io/package/vite-tsconfig-paths.md) ^5.0.1
- [@vitejs/plugin-react](https://npm.io/package/@vitejs/plugin-react.md) ^4.3.1

## Recent versions

- 2.0.0 (latest) — 2024-09-26
- 1.1.0 — 2023-06-13
- 1.0.4 — 2023-06-07
- 1.0.3 — 2023-06-06
- 1.0.2 — 2023-06-06
- 1.0.1 — 2023-06-06

## README

# Material Ui File Manager

install

```cli
npm i mui-file-manager
```

```cli
yarn add mui-file-manager
```

## Features

- show files
- show folders
- show images preview and show other formats with icon
- copy, cut, rename, delete **files**
- copy, cut, rename, delete **folders**
- choose permissions for each feature of the files or folders
- choose your own dictionary using keywords props
- handle events and path changing
- loading handler
- **support rtl via theme**
- **support light and dark mode**
- compatible with your **material ui theme**

### Usage and Types

```jsx

import MuiFileManager from "mui-file-manager"

const YourFileManagment = () => {

  const [currentPath, setCurrentPath] = useState('/')

  // ANCHOR data
  const data = {
    '/': [
      folders: [{ name: 'string', full_path: "string", path: "string" }],
      files: [{id: "number", full_path: "string", name_without_prefix: 'string', mime_type: "string"}]
    ],
    "/test": [
      folders: [{ name: 'string', full_path: "string", path: "string" }],
      files: [{id: "number", full_path: "string", name_without_prefix: 'string', mime_type: "string"}]
    ],
  }


  // ANCHOR handlers
  const handleCurrentPath = (url: string) => setCurrentPath(url)

  const handleRefetch = () => /* refetch */

  const fileAction = ({ action: string; data: any; method?: "POST" | "PATCH" | "DELETE" }) => /* file action */

  const folderAction = ({ action: string; data: any; method?: "POST" | "PATCH" | "DELETE" }) => /* file action */

  const onSelectFile = (file: {id: "number", full_path: "string", name_without_prefix: 'string', mime_type: "string"}) => /* handle select file */

  return (
    <MuiFileManager
      currentPath={currentPath}
      data={data[currentPath]}
      isLoading={isLoading}
      refetch={handleRefetch}
      setCurrentPath={handleCurrentPath}
      onFileAction={fileActions}
      onFolderAction={folderActions}
      onSelectFile={onSelectFile}
      permissions={ {
              file: [ "rename", "cut", "copy", "remove", "upload", "create", "list"],
              folder: [ "rename", "cut", "copy", "remove", "upload", "create", "list"],
            }
      }
      keywords={{
            copy: "string",
            cut: "string",
            rename: "string",
            refresh: "string",
            upload: "string",
            'new folder': "string",
            'past here': "string",
            cancel: "string",
            'Are you sure to delete': "string",
            remove: "string",
            submit: "string",
            'file name': "string",
            'back': "string"
        }}
    />
  );
};

```

---
_Source: https://npm.io/package/mui-file-manager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._