@cubone/react-file-manager 1.3.3 → 1.4.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/README.md +29 -12
- package/dist/react-file-manager.es.js +2540 -2689
- package/dist/style.css +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -32,16 +32,20 @@ function App() {
|
|
|
32
32
|
name: "Documents",
|
|
33
33
|
isDirectory: true, // Folder
|
|
34
34
|
path: "/Documents", // Located in Root directory
|
|
35
|
+
updatedAt: "2024-09-09T10:30:00Z", // Last updated time (ISO 8601 format)
|
|
35
36
|
},
|
|
36
37
|
{
|
|
37
38
|
name: "Pictures",
|
|
38
39
|
isDirectory: true, // Folder
|
|
39
40
|
path: "/Pictures", // Located in Root directory
|
|
41
|
+
updatedAt: "2024-09-09T11:00:00Z", // Last updated time (ISO 8601 format)
|
|
40
42
|
},
|
|
41
43
|
{
|
|
42
44
|
name: "Pic.png",
|
|
43
45
|
isDirectory: false, // File
|
|
44
46
|
path: "/Pictures/Pic.png", // Located inside the "Pictures" folder
|
|
47
|
+
updatedAt: "2024-09-08T16:45:00Z", // Last updated time (ISO 8601 format)
|
|
48
|
+
size: 2048, // File size in bytes (example: 2 KB)
|
|
45
49
|
},
|
|
46
50
|
]);
|
|
47
51
|
|
|
@@ -53,20 +57,33 @@ function App() {
|
|
|
53
57
|
}
|
|
54
58
|
```
|
|
55
59
|
|
|
60
|
+
## 📂 File Structure
|
|
61
|
+
|
|
62
|
+
The `files` prop accepts an array of objects, where each object represents a file or folder. You can customize the structure to meet your application needs. Each file or folder object follows the structure detailed below:
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
type File = {
|
|
66
|
+
name: string;
|
|
67
|
+
isDirectory: boolean;
|
|
68
|
+
path: string;
|
|
69
|
+
updatedAt?: string;
|
|
70
|
+
size?: number;
|
|
71
|
+
};
|
|
72
|
+
```
|
|
73
|
+
|
|
56
74
|
## ⚙️ Props
|
|
57
75
|
|
|
58
|
-
| Name | Type
|
|
59
|
-
| ------------------ |
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
|
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
| `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. |
|
|
76
|
+
| Name | Type | Description |
|
|
77
|
+
| ------------------ | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
78
|
+
| `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`. |
|
|
79
|
+
| `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" } }` |
|
|
80
|
+
| `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. |
|
|
81
|
+
| `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. |
|
|
82
|
+
| `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)]);` |
|
|
83
|
+
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
|
|
84
|
+
| `onDelete` | (file: [File](#-file-structure)) => void | A callback function triggered when a file or folder is deleted. |
|
|
85
|
+
| `onPaste` | (file: [File](#-file-structure), destinationFolder: [File](#-file-structure), operationType: "copy" \| "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. |
|
|
86
|
+
| `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
87
|
|
|
71
88
|
## 🤝 Contributing
|
|
72
89
|
|