Skip to content

Commit 03d8bb6

Browse files
Saifullah-devSaifullah-dev
authored
Merge pull request #49 from Saifullah-dev/feature/inline-editing
fix(documentation): add latest features to Readme
2 parents 2a31eba + 78a18f4 commit 03d8bb6

File tree

1 file changed

+30
-26
lines changed

1 file changed

+30
-26
lines changed

‎frontend/README.md‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
![React File Manager](https://github.com/user-attachments/assets/45994895-0269-43bb-b268-06bd2dd85397)
1+
![React File Manager](https://github.com/user-attachments/assets/53b09633-220e-460d-a5a5-48f553640dd0)
22

33
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.
44

5-
## Features
5+
## ✨ Features
66

77
- **View Files and Folders**: Display the directory structure with folders and files.
88
- **Upload Files**: Upload new files to a selected directory.
99
- **Delete Files and Folders**: Remove unwanted files or folders.
10+
- **Copy and Move Files**: Easily copy or move files and folders to a different directory.
11+
- **Inline Folder Creation and Renaming**: Create new folders and rename files or folders directly within the file list.
1012
- **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+
- **Breadcrumb Navigation**: Navigate through the directory structure with a breadcrumb trail.
14+
- **Navigation Pane**: Quickly switch between folders and directories using a sidebar navigation pane.
1315
- **Context Menu**: Right-click to open a context menu with options for cutting, copying, pasting, renaming, and deleting files or folders.
1416

15-
## Installation
17+
## 🚀 Installation
1618

1719
To install `React File Manager`, use the following command:
1820

1921
```bash
2022
npm i @cubone/react-file-manager
2123
```
2224

23-
## Usage
25+
## 💻 Usage
2426

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

@@ -33,17 +35,17 @@ function App() {
3335
const [files, setFiles] = useState([
3436
{
3537
name: "Documents",
36-
isDirectory: true, // Folder
38+
isDirectory: true, // Folder
3739
path: "/Documents", // Located in Root directory
3840
},
3941
{
4042
name: "Pictures",
41-
isDirectory: true, // Folder
43+
isDirectory: true, // Folder
4244
path: "/Pictures", // Located in Root directory
4345
},
4446
{
4547
name: "Pic.png",
46-
isDirectory: false, // File
48+
isDirectory: false, // File
4749
path: "/Pictures/Pic.png", // Located inside the "Pictures" folder
4850
},
4951
]);
@@ -55,22 +57,23 @@ function App() {
5557
);
5658
}
5759
```
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
60+
61+
## ⚙️ Props
62+
63+
| Name | Type | Description |
64+
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
65+
| `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. |
66+
| `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`. |
67+
| `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" } }` |
68+
| 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. |
69+
| `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. |
70+
| `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)]);` |
71+
| onRename | (file: { name: string, isDirectory: boolean, path: string }, newName: string) => void | A callback function triggered when a file or folder is renamed. |
72+
| onDelete | (file: { name: string, isDirectory: boolean, path: string }) => void | A callback function triggered when a file or folder is deleted. |
73+
| 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. |
74+
| `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. |
75+
76+
## 🤝 Contributing
7477

7578
Contributions are welcome! To contribute:
7679

@@ -89,8 +92,9 @@ cd react-file-manager
8992
npm i
9093
npm run dev
9194
```
95+
9296
The application should now be running on `http://localhost:5173`, have fun!
9397

94-
## License
98+
## ©️ License
9599

96100
React File Manager is [MIT Licensed](LICENSE).

0 commit comments

Comments
 (0)