@cubone/react-file-manager 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
An open-source React.js package for easy integration of a file manager into applications. It provides a user-friendly interface for managing files and folders, including viewing, uploading, and deleting, with full UI and backend integration.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **View Files and Folders**: Display the directory structure with folders and files.
|
|
8
|
+
- **Upload Files**: Upload new files to a selected directory.
|
|
9
|
+
- **Delete Files and Folders**: Remove unwanted files or folders.
|
|
10
|
+
- **Toolbar**: Access common file operations such as upload, delete, and refresh with a convenient toolbar.
|
|
11
|
+
- **Breadcrumb Navigation**: Easily navigate through the directory structure.
|
|
12
|
+
- **Navigation Pane**: Easily switch between folders and directories with a sidebar navigation pane.
|
|
13
|
+
- **Context Menu**: Right-click to open a context menu with options for cutting, copying, pasting, renaming, and deleting files or folders.
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
To install `React File Manager`, use the following command:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm i @cubone/react-file-manager
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
Here’s a basic example of how to use the File Manager Component in your React application:
|
|
26
|
+
|
|
27
|
+
```javascript
|
|
28
|
+
import { useState } from "react";
|
|
29
|
+
import { FileManager } from "@cubone/react-file-manager";
|
|
30
|
+
import "@cubone/react-file-manager/dist/style.css";
|
|
31
|
+
|
|
32
|
+
function App() {
|
|
33
|
+
const [files, setFiles] = useState([
|
|
34
|
+
{
|
|
35
|
+
name: "Documents",
|
|
36
|
+
isDirectory: true, // Folder
|
|
37
|
+
path: "/Documents", // Located in Root directory
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
name: "Pictures",
|
|
41
|
+
isDirectory: true, // Folder
|
|
42
|
+
path: "/Pictures", // Located in Root directory
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: "Pic.png",
|
|
46
|
+
isDirectory: false, // File
|
|
47
|
+
path: "/Pictures/Pic.png", // Located inside the "Pictures" folder
|
|
48
|
+
},
|
|
49
|
+
]);
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<>
|
|
53
|
+
<FileManager files={files} />
|
|
54
|
+
</>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
## Props
|
|
59
|
+
|
|
60
|
+
| Name | Type | Description |
|
|
61
|
+
|-----------------|------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------|
|
|
62
|
+
| `files` | `Array<{ name: string, isDirectory: boolean, path: string }>` | An array of file and folder objects representing the current directory structure. Each object includes `name`, `isDirectory`, and `path` properties. |
|
|
63
|
+
| `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`. |
|
|
64
|
+
| `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" } }` |
|
|
65
|
+
| onCreateFolder | (name: string, parentFolder: { name: string, isDirectory: boolean, path: string }) => 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. |
|
|
66
|
+
| `onFileUploading` | `(file: { name: string, isDirectory: boolean, path: string }, parentFolder: { name: string, isDirectory: boolean, path: string }) => { [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. |
|
|
67
|
+
| `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 extracts the uploaded file details and add it to the `files` state e.g. ``setFiles((prev) => [...prev, JSON.parse(response)]);`` |
|
|
68
|
+
| onRename | (file: { name: string, isDirectory: boolean, path: string }, newName: string) => void | A callback function triggered when a file or folder is renamed. |
|
|
69
|
+
| onDelete | (file: { name: string, isDirectory: boolean, path: string }) => void | A callback function triggered when a file or folder is deleted. |
|
|
70
|
+
| onPaste | (sourceItem: { name: string, isDirectory: boolean, path: string }, destinationFolder: { name: string, isDirectory: boolean, path: string }, operationType: "copy" or "move") => void | A callback function triggered when a file or folder is 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. |
|
|
71
|
+
| `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. |
|
|
72
|
+
|
|
73
|
+
## Contributing
|
|
74
|
+
|
|
75
|
+
Contributions are welcome! To contribute:
|
|
76
|
+
|
|
77
|
+
1. Fork the repository.
|
|
78
|
+
2. Create a new branch (`git checkout -b feature/branch-name`).
|
|
79
|
+
3. Make your changes.
|
|
80
|
+
4. Commit your changes (`git commit -m 'Add some feature'`).
|
|
81
|
+
5. Push to the branch (`git push origin feature/branch-name`).
|
|
82
|
+
6. Open a Pull Request.
|
|
83
|
+
|
|
84
|
+
Get started by running following commands:
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
git clone https://github.com/Saifullah-dev/react-file-manager.git
|
|
88
|
+
cd react-file-manager
|
|
89
|
+
npm i
|
|
90
|
+
npm run dev
|
|
91
|
+
```
|
|
92
|
+
The application should now be running on `http://localhost:5173`, have fun!
|
|
93
|
+
|
|
94
|
+
## License
|
|
95
|
+
|
|
96
|
+
React File Manager is [MIT Licensed](LICENSE).
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cubone/react-file-manager",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "dist/react-file-manager.es.js",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist/",
|
|
9
|
-
"
|
|
9
|
+
"README.md"
|
|
10
10
|
],
|
|
11
11
|
"publishConfig": {
|
|
12
12
|
"access": "public"
|