@jfvilas/react-file-manager 1.0.0 → 1.0.2
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 +45 -36
- package/dist/react-file-manager.es.js +5622 -0
- package/dist/style.css +1 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -93,50 +93,59 @@ type File = {
|
|
|
93
93
|
path: string;
|
|
94
94
|
updatedAt?: string; // Optional: Last update timestamp in ISO 8601 format
|
|
95
95
|
size?: number; // Optional: File size in bytes (only applicable for files)
|
|
96
|
+
class?:string; // Optional: File class to be used with custom icons and custom actions
|
|
96
97
|
};
|
|
97
98
|
```
|
|
98
99
|
|
|
100
|
+
## Icons & Actions
|
|
101
|
+
+++
|
|
102
|
+
|
|
103
|
+
## UI Customization
|
|
104
|
+
+++
|
|
105
|
+
|
|
99
106
|
## ⚙️ Props
|
|
100
107
|
|
|
101
|
-
| Name
|
|
102
|
-
|
|
|
103
|
-
| `acceptedFileTypes` | string
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
108
|
+
| Name | Type | Description |
|
|
109
|
+
| - | - | - |
|
|
110
|
+
| `acceptedFileTypes` | string | (Optional) A comma-separated list of allowed file extensions for uploading specific file types (e.g., `.txt, .png, .pdf`). If omitted, all file types are accepted. |
|
|
111
|
+
| `actions` | Map<string Action[]> | (Optional) A map of custom actions that would be added to the proper file class |
|
|
112
|
+
| `className` | string | CSS class names to apply to the FileManager root element. |
|
|
113
|
+
| `collapsibleNav` | boolean | Enables a collapsible navigation pane on the left side. When `true`, a toggle will be shown to expand or collapse the navigation pane. `default: false`. |
|
|
114
|
+
| `defaultNavExpanded` | boolean | Sets the default expanded (`true`) or collapsed (`false`) state of the navigation pane when `collapsibleNav` is enabled. This only affects the initial render. `default: true`. |
|
|
115
|
+
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager `default: true`. |
|
|
116
|
+
| `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`. |
|
|
117
|
+
| `filePreviewComponent` | (file: [File](#-file-structure)) => React.ReactNode | (Optional) A callback function that provides a custom file preview. It receives the selected file as its argument and must return a valid React node, JSX element, or HTML. Use this prop to override the default file preview behavior. Example: [Custom Preview Usage](#custom-file-preview). |
|
|
118
|
+
| `fileUploadConfig` | { url: string; method?: "POST" \| "PUT"; headers?: { [key: string]: string } } | Configuration object for file uploads. It includes the upload URL (`url`), an optional HTTP method (`method`, default is `"POST"`), and an optional `headers` object for setting custom HTTP headers in the upload request. The `method` property allows only `"POST"` or `"PUT"` values. The `headers` object can accept any standard or custom headers required by the server. Example: `{ url: "https://example.com/fileupload", method: "PUT", headers: { Authorization: "Bearer " + TOKEN, "X-Custom-Header": "value" } }` |
|
|
119
|
+
| `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. |
|
|
120
|
+
| `fontFamily` | string | The font family to be used throughout the component. Accepts any valid CSS font family (e.g., `'Arial, sans-serif'`, `'Roboto'`). You can customize the font styling to match your application's theme. `default: 'Nunito Sans, sans-serif'`. |
|
|
113
121
|
| `formatDate` | (date: string \| Date) => string | (Optional) A custom function used to format file and folder modification dates. If omitted, the component falls back to its built-in formatter from `utils/formatDate`. Useful for adapting the date display to different locales or formats.
|
|
114
|
-
| `height` | string \| number
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
122
|
+
| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
|
|
123
|
+
| `icons` | Map<string, { open:JSX.Element, closed:JSX.Element }> | (Optional) A map of custom icons that would be shown according to file class |
|
|
124
|
+
| `initialPath` | string | The path of the directory to be loaded initially e.g. `/Documents`. This should be the path of a folder which is included in `files` array. Default value is `""` |
|
|
125
|
+
| `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`. |
|
|
117
126
|
| `language` | string | A language code used for translations (e.g., `"en-US"`, `"fr-FR"`, `"tr-TR"`). Defaults to `"en-US"` for English. Allows the user to set the desired translation language manually. <br><br>**Available languages:** <br> 🇸🇦 `ar-SA` (Arabic, Saudi Arabia) <br> 🇩🇪 `de-DE` (German, Germany) <br> 🇺🇸 `en-US` (English, United States) <br> 🇪🇸 `es-ES` (Spanish, Spain) <br> 🇫🇷 `fr-FR` (French, France) <br> 🇮🇱 `he-IL` (Hebrew, Israel) <br> 🇮🇳 `hi-IN` (Hindi, India) <br> 🇮🇹 `it-IT` (Italian, Italy) <br> 🇯🇵 `ja-JP` (Japanese, Japan) <br> 🇰🇷 `ko-KR` (Korean, South Korea) <br> 🇧🇷 `pt-BR` (Portuguese, Brazil) <br> 🇵🇹 `pt-PT` (Portuguese, Portugal) <br> 🇷🇺 `ru-RU` (Russian, Russia) <br> 🇹🇷 `tr-TR` (Turkish, Turkey) <br> 🇺🇦 `uk-UA` (Ukrainian, Ukraine) <br> 🇵🇰 `ur-UR` (Urdu, Pakistan) <br> 🇻🇳 `vi-VN` (Vietnamese, Vietnam) <br> 🇨🇳 `zh-CN` (Chinese, Simplified) <br> 🇵🇱 `pl-PL` (Polish, Poland) |
|
|
118
|
-
| `layout`
|
|
119
|
-
| `maxFileSize` | number
|
|
120
|
-
| `onCopy` | (files: Array<[File](#-file-structure)>) => void
|
|
121
|
-
| `onCut` | (files: Array<[File](#-file-structure)>) => void
|
|
122
|
-
| `onCreateFolder` | (name: string, parentFolder: [File](#-file-structure)) => void
|
|
123
|
-
| `onDelete` | (files: Array<[File](#-file-structure)>) => void
|
|
124
|
-
| `onDownload` | (files: Array<[File](#-file-structure)>) => void
|
|
125
|
-
| `onError`
|
|
126
|
-
| `onFileOpen` | (file: [File](#-file-structure)) => void
|
|
127
|
-
| `onFolderChange` | (path: string) => void
|
|
128
|
-
| `onFileUploaded` | (response: { [key: string]: any }) => void
|
|
129
|
-
| `onFileUploading` | (file: [File](#-file-structure), parentFolder: [File](#-file-structure)) => { [key: string]: any }
|
|
130
|
-
| `onLayoutChange` | (layout: "list" \| "grid") => void
|
|
131
|
-
| `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.
|
|
132
|
-
| `onRefresh` | () => void
|
|
133
|
-
| `onRename` | (file: [File](#-file-structure), newName: string) => void
|
|
134
|
-
| `onSelectionChange` | (files: Array<[File](#-file-structure)>) => void
|
|
135
|
-
| `onSelect`⚠️(deprecated) | (files: Array<[File](#-file-structure)>) => void
|
|
127
|
+
| `layout` | "list" \| "grid" | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid". |
|
|
128
|
+
| `maxFileSize` | number | For limiting the maximum upload file size in bytes. |
|
|
129
|
+
| `onCopy` | (files: Array<[File](#-file-structure)>) => void | (Optional) A callback function triggered when one or more files or folders are copied providing copied files as an argument. Use this function to perform custom actions on copy event. |
|
|
130
|
+
| `onCut` | (files: Array<[File](#-file-structure)>) => void | (Optional) A callback function triggered when one or more files or folders are cut, providing the cut files as an argument. Use this function to perform custom actions on the cut event |
|
|
131
|
+
| `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. |
|
|
132
|
+
| `onDelete` | (files: Array<[File](#-file-structure)>) => void | A callback function is triggered when one or more files or folders are deleted. |
|
|
133
|
+
| `onDownload` | (files: Array<[File](#-file-structure)>) => void | A callback function triggered when one or more files or folders are downloaded. |
|
|
134
|
+
| `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`. |
|
|
135
|
+
| `onFileOpen` | (file: [File](#-file-structure)) => void | A callback function triggered when a file or folder is opened. |
|
|
136
|
+
| `onFolderChange` | (path: string) => void | A callback function triggered when the active folder changes. Receives the full path of the current folder as a string parameter. Useful for tracking the active folder path. |
|
|
137
|
+
| `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)]);` |
|
|
138
|
+
| `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. |
|
|
139
|
+
| `onLayoutChange` | (layout: "list" \| "grid") => void | A callback function triggered when the layout of the file manager is changed. |
|
|
140
|
+
| `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. |
|
|
141
|
+
| `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. |
|
|
142
|
+
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
|
|
143
|
+
| `onSelectionChange` | (files: Array<[File](#-file-structure)>) => void | (Optional) A callback triggered whenever a file or folder is **selected or deselected**. The function receives the updated array of selected files or folders, allowing you to handle selection-related actions such as displaying file details, enabling toolbar actions, or updating the UI. |
|
|
144
|
+
| `onSelect`⚠️(deprecated) | (files: Array<[File](#-file-structure)>) => void | (Optional) Legacy callback triggered only when a file or folder is **selected**. This prop is deprecated and will be removed in the next major release. Please migrate to `onSelectionChange`. |
|
|
136
145
|
| `permissions` | { create?: boolean; upload?: boolean; move?: boolean; copy?: boolean; rename?: boolean; download?: boolean; delete?: boolean; } | An object that controls the availability of specific file management actions. Setting an action to `false` hides it from the toolbar, context menu, and any relevant UI. All actions default to `true` if not specified. This is useful for implementing role-based access control or restricting certain operations. Example: `{ create: false, delete: false }` disables folder creation and file deletion. |
|
|
137
|
-
| `primaryColor` | string
|
|
138
|
-
| `style` | object
|
|
139
|
-
| `width` | string \| number
|
|
146
|
+
| `primaryColor` | string | The primary color for the component's theme. Accepts any valid CSS color format (e.g., `'blue'`, `'#E97451'`, `'rgb(52, 152, 219)'`). This color will be applied to buttons, highlights, and other key elements. `default: #6155b4`. |
|
|
147
|
+
| `style` | object | Inline styles applied to the FileManager root element. |
|
|
148
|
+
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
|
|
140
149
|
|
|
141
150
|
## ⌨️ Keyboard Shortcuts
|
|
142
151
|
|