@cubone/react-file-manager 1.0.2 → 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 +15 -13
- package/dist/react-file-manager.es.js +1314 -1266
- package/dist/react-file-manager.umd.js +19 -19
- package/package.json +2 -1
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
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
4
|
|
|
@@ -33,18 +33,18 @@ function App() {
|
|
|
33
33
|
const [files, setFiles] = useState([
|
|
34
34
|
{
|
|
35
35
|
name: "Documents",
|
|
36
|
-
isDirectory: true,
|
|
37
|
-
path: "", // Root directory
|
|
36
|
+
isDirectory: true, // Folder
|
|
37
|
+
path: "/Documents", // Located in Root directory
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
name: "Pictures",
|
|
41
|
-
isDirectory: true,
|
|
42
|
-
path: "", // Root directory
|
|
41
|
+
isDirectory: true, // Folder
|
|
42
|
+
path: "/Pictures", // Located in Root directory
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
name: "Pic.png",
|
|
46
|
-
isDirectory: false,
|
|
47
|
-
path: "/Pictures", // Located inside the "Pictures" folder
|
|
46
|
+
isDirectory: false, // File
|
|
47
|
+
path: "/Pictures/Pic.png", // Located inside the "Pictures" folder
|
|
48
48
|
},
|
|
49
49
|
]);
|
|
50
50
|
|
|
@@ -60,13 +60,15 @@ function App() {
|
|
|
60
60
|
| Name | Type | Description |
|
|
61
61
|
|-----------------|------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------|
|
|
62
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 indicating whether the application is currently performing an operation, such as creating, renaming, or deleting a file/folder. Displays a loading state if `true`. |
|
|
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
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
|
-
|
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
|
|
|
69
|
-
|
|
|
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. |
|
|
70
72
|
|
|
71
73
|
## Contributing
|
|
72
74
|
|