@cubone/react-file-manager 1.7.1 â 1.9.0
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/LICENSE +21 -0
- package/README.md +69 -29
- package/dist/react-file-manager.es.js +2917 -2761
- package/dist/style.css +1 -1
- package/package.json +3 -2
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Saifullah Zubair
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -12,10 +12,14 @@ An open-source React.js package for easy integration of a file manager into appl
|
|
|
12
12
|
|
|
13
13
|
## ⨠Features
|
|
14
14
|
|
|
15
|
-
- **File & Folder Management**: View, upload, delete, copy, move, create, and rename files or folders seamlessly.
|
|
15
|
+
- **File & Folder Management**: View, upload, download, delete, copy, move, create, and rename files or folders seamlessly.
|
|
16
16
|
- **Grid & List View**: Switch between grid and list views to browse files in your preferred layout.
|
|
17
17
|
- **Navigation**: Use the breadcrumb trail and sidebar navigation pane for quick directory traversal.
|
|
18
|
-
- **Toolbar & Context Menu**: Access all common actions (upload, delete, copy, move, rename, etc.) via the toolbar or right-click for the same options in the context menu.
|
|
18
|
+
- **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.
|
|
19
|
+
- **Multi-Selection**: Select multiple files and folders at once to perform bulk actions like delete, copy, move, or download.
|
|
20
|
+
- **Keyboard Shortcuts**: Quickly perform file operations like copy, paste, delete, and more using intuitive keyboard shortcuts.
|
|
21
|
+
|
|
22
|
+
|
|
19
23
|
|
|
20
24
|
## đ Installation
|
|
21
25
|
|
|
@@ -73,9 +77,9 @@ The `files` prop accepts an array of objects, where each object represents a fil
|
|
|
73
77
|
|
|
74
78
|
```typescript
|
|
75
79
|
type File = {
|
|
76
|
-
name: string;
|
|
77
|
-
isDirectory: boolean;
|
|
78
|
-
path: string;
|
|
80
|
+
name: string;
|
|
81
|
+
isDirectory: boolean;
|
|
82
|
+
path: string;
|
|
79
83
|
updatedAt?: string; // Optional: Last update timestamp in ISO 8601 format
|
|
80
84
|
size?: number; // Optional: File size in bytes (only applicable for files)
|
|
81
85
|
};
|
|
@@ -83,29 +87,49 @@ type File = {
|
|
|
83
87
|
|
|
84
88
|
## âī¸ Props
|
|
85
89
|
|
|
86
|
-
| Name | Type
|
|
87
|
-
| ------------------- |
|
|
88
|
-
| `acceptedFileTypes` | string
|
|
89
|
-
| `enableFilePreview` | boolean
|
|
90
|
-
| `filePreviewPath` | string
|
|
91
|
-
| `fileUploadConfig` | { url: string; headers?: { [key: string]: string } }
|
|
92
|
-
| `files` | Array<[File](#-file-structure)>
|
|
93
|
-
| `height` | string \| number
|
|
94
|
-
| `isLoading` | boolean
|
|
95
|
-
| `layout` | "list" \| "grid"
|
|
96
|
-
| `maxFileSize` | number
|
|
97
|
-
| `onCreateFolder` | (name: string, parentFolder: [File](#-file-structure)) => void
|
|
98
|
-
| `onDelete` | (
|
|
99
|
-
| `onDownload` | (
|
|
100
|
-
| `onError` | (error: { type: string, message: string }, file: [File](#-file-structure)) => void
|
|
101
|
-
| `onFileOpen` | (file: [File](#-file-structure)) => void
|
|
102
|
-
| `onFileUploaded` | (response: { [key: string]: any }) => void
|
|
103
|
-
| `onFileUploading` | (file: [File](#-file-structure), parentFolder: [File](#-file-structure)) => { [key: string]: any }
|
|
104
|
-
| `onLayoutChange` | (layout: "list" \| "grid") => void
|
|
105
|
-
| `onPaste` | (
|
|
106
|
-
| `onRefresh` | () => void
|
|
107
|
-
| `onRename` | (file: [File](#-file-structure), newName: string) => void
|
|
108
|
-
| `width` | string \| number
|
|
90
|
+
| Name | Type | Description |
|
|
91
|
+
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
92
|
+
| `acceptedFileTypes` | string | A comma-separated list of allowed file extensions for uploading files. (e.g.,`.txt, .png, .pdf`). |
|
|
93
|
+
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager. |
|
|
94
|
+
| `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`. |
|
|
95
|
+
| `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" } }` |
|
|
96
|
+
| `files` | Array<[File](#-file-structure)> | An array of file and folder objects representing the current directory structure. Each object includes `name`, `isDirectory`, and `path` properties. |
|
|
97
|
+
| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
|
|
98
|
+
| `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`. |
|
|
99
|
+
| `layout` | "list" \| "grid" | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid". |
|
|
100
|
+
| `maxFileSize` | number | For limiting the maximum upload file size in bytes. |
|
|
101
|
+
| `onCreateFolder` | (name: string, parentFolder: [File](#-file-structure)) => 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. |
|
|
102
|
+
| `onDelete` | (files: Array<[File](#-file-structure)>) => void | A callback function is triggered when one or more files or folders are deleted. |
|
|
103
|
+
| `onDownload` | (files: Array<[File](#-file-structure)>) => void | A callback function triggered when one or more files or folders are downloaded. |
|
|
104
|
+
| `onError` | (error: { type: string, message: string }, file: [File](#-file-structure)) => 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`. |
|
|
105
|
+
| `onFileOpen` | (file: [File](#-file-structure)) => void | A callback function triggered when a file or folder is opened. |
|
|
106
|
+
| `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)]);` |
|
|
107
|
+
| `onFileUploading` | (file: [File](#-file-structure), parentFolder: [File](#-file-structure)) => { [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. |
|
|
108
|
+
| `onLayoutChange` | (layout: "list" \| "grid") => void | A callback function triggered when the layout of the file manager is changed. |
|
|
109
|
+
| `onPaste` | (files: Array<[File](#-file-structure)>, destinationFolder: [File](#-file-structure), 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. |
|
|
110
|
+
| `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. |
|
|
111
|
+
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
|
|
112
|
+
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
|
|
113
|
+
|
|
114
|
+
## â¨ī¸ Keyboard Shortcuts
|
|
115
|
+
|
|
116
|
+
| **Action** | **Shortcut** |
|
|
117
|
+
| ------------------------------ | ------------------ |
|
|
118
|
+
| New Folder | `Alt + Shift + N` |
|
|
119
|
+
| Upload Files | `CTRL + U` |
|
|
120
|
+
| Cut | `CTRL + X` |
|
|
121
|
+
| Copy | `CTRL + C` |
|
|
122
|
+
| Paste | `CTRL + V` |
|
|
123
|
+
| Rename | `F2` |
|
|
124
|
+
| Download | `CTRL + D` |
|
|
125
|
+
| Delete | `DEL` |
|
|
126
|
+
| Select All Files | `CTRL + A` |
|
|
127
|
+
| Jump to First File in the List | `Home` |
|
|
128
|
+
| Jump to Last File in the List | `End` |
|
|
129
|
+
| Switch to List Layout | `CTRL + Shift + 1` |
|
|
130
|
+
| Switch to Grid Layout | `CTRL + Shift + 2` |
|
|
131
|
+
| Refresh File List | `F5` |
|
|
132
|
+
| Clear Selection | `Esc` |
|
|
109
133
|
|
|
110
134
|
## đ¤ Contributing
|
|
111
135
|
|
|
@@ -123,11 +147,27 @@ Get started by running following commands:
|
|
|
123
147
|
```bash
|
|
124
148
|
git clone https://github.com/Saifullah-dev/react-file-manager.git
|
|
125
149
|
cd react-file-manager
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
**Frontend**
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
cd frontend
|
|
126
156
|
npm i
|
|
127
157
|
npm run dev
|
|
128
158
|
```
|
|
129
159
|
|
|
130
|
-
The application should now be running on `http://localhost:5173
|
|
160
|
+
The application should now be running on `http://localhost:5173`.
|
|
161
|
+
|
|
162
|
+
**Backend**
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
cd backend
|
|
166
|
+
npm i
|
|
167
|
+
npm run devStart
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
The server should now be running on `http://localhost:3000`, have fun!
|
|
131
171
|
|
|
132
172
|
## Šī¸ License
|
|
133
173
|
|