Skip to content

Commit d00bf5f

Browse files
Saifullah-devSaifullah-dev
authored
Merge pull request #43 from Saifullah-dev/feature/backend
Feature/backend
2 parents 816b1c2 + e232dcb commit d00bf5f

File tree

2 files changed

+97
-1
lines changed

2 files changed

+97
-1
lines changed

‎frontend/README.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
![React File Manager](https://github.com/user-attachments/assets/45994895-0269-43bb-b268-06bd2dd85397)
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).

‎frontend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"module": "dist/react-file-manager.es.js",
77
"files": [
88
"dist/",
9-
"../README.md"
9+
"README.md"
1010
],
1111
"publishConfig": {
1212
"access": "public"

0 commit comments

Comments
 (0)