@cubone/react-file-manager 1.35.0 → 1.37.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 +104 -22
- package/dist/index.d.ts +138 -0
- package/dist/react-file-manager.es.js +4511 -4229
- package/dist/style.css +1 -1
- package/package.json +25 -9
- package/src/index.js +0 -1
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
</div>
|
|
10
10
|
|
|
11
11
|
<p>
|
|
12
|
-
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.
|
|
12
|
+
An open-source React.js package with TypeScript support 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.
|
|
13
13
|
</p>
|
|
14
14
|
|
|
15
15
|
## ✨ Features
|
|
@@ -27,6 +27,11 @@ An open-source React.js package for easy integration of a file manager into appl
|
|
|
27
27
|
intuitive keyboard shortcuts.
|
|
28
28
|
- **Drag-and-Drop**: Move selected files and folders by dragging them to the desired directory,
|
|
29
29
|
making file organization effortless.
|
|
30
|
+
- **Folder Upload**: Upload a whole folder with its subfolders from the Upload menu or by dragging it
|
|
31
|
+
into the upload dialog. Works with your existing create-folder and upload endpoints.
|
|
32
|
+
- **Column Sorting**: Click on column headers in list view to sort files by name, modified date, or
|
|
33
|
+
size. Click again to toggle between ascending (▲) and descending (▼) order. Folders are always
|
|
34
|
+
displayed before files regardless of the sort criteria.
|
|
30
35
|
|
|
31
36
|
|
|
32
37
|
|
|
@@ -80,62 +85,104 @@ function App() {
|
|
|
80
85
|
export default App;
|
|
81
86
|
```
|
|
82
87
|
|
|
88
|
+
> **Using TypeScript?** Import the `FileItem` type and pass it to `useState`:
|
|
89
|
+
>
|
|
90
|
+
> ```tsx
|
|
91
|
+
> import { FileManager, type FileItem } from "@cubone/react-file-manager";
|
|
92
|
+
>
|
|
93
|
+
> const [files, setFiles] = useState<FileItem[]>([...]);
|
|
94
|
+
> ```
|
|
95
|
+
>
|
|
96
|
+
> See the [TypeScript](#-typescript) section for all available types.
|
|
97
|
+
|
|
98
|
+
More detailed samples can be found in the [samples folder](https://github.com/Saifullah-dev/react-file-manager/tree/main/samples).
|
|
99
|
+
|
|
100
|
+
## 🔷 TypeScript
|
|
101
|
+
|
|
102
|
+
Type definitions are included in the package, so there is nothing extra to install. Props are
|
|
103
|
+
type-checked and autocompleted automatically, and you can import any of the types alongside the
|
|
104
|
+
component:
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
import { FileManager, type Permissions, type OnRename } from "@cubone/react-file-manager";
|
|
108
|
+
|
|
109
|
+
const permissions: Permissions = { create: false, delete: false };
|
|
110
|
+
|
|
111
|
+
const handleRename: OnRename = (file, newName) => {
|
|
112
|
+
// file: FileItem, newName: string
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
<FileManager files={files} permissions={permissions} onRename={handleRename} />;
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
**Available types:**
|
|
119
|
+
|
|
120
|
+
- **Props & data:** `FileManagerProps`, `FileItem`, `Permissions`, `Layout`, `Language`,
|
|
121
|
+
`SortConfiguration`, `FileUploadConfiguration`
|
|
122
|
+
- **Callbacks:** `OnCreateFolder`, `OnFileUploading`, `OnFileUploaded`, `OnCut`, `OnCopy`,
|
|
123
|
+
`OnPaste`, `OnRename`, `OnDownload`, `OnDelete`, `OnRefresh`, `OnFileOpen`, `OnFolderChange`,
|
|
124
|
+
`OnSelect`, `OnSelectionChange`, `OnSortChange`, `OnLayoutChange`, `OnError`,
|
|
125
|
+
`FilePreviewComponent`
|
|
126
|
+
|
|
83
127
|
## 📂 File Structure
|
|
84
128
|
|
|
85
129
|
The `files` prop accepts an array of objects, where each object represents a file or folder. You can
|
|
86
130
|
customize the structure to meet your application needs. Each file or folder object follows the
|
|
87
|
-
structure detailed below:
|
|
131
|
+
structure detailed below (exported as `FileItem` for TypeScript):
|
|
88
132
|
|
|
89
133
|
```typescript
|
|
90
|
-
|
|
134
|
+
interface FileItem {
|
|
91
135
|
name: string;
|
|
92
136
|
isDirectory: boolean;
|
|
93
137
|
path: string;
|
|
94
138
|
updatedAt?: string; // Optional: Last update timestamp in ISO 8601 format
|
|
95
139
|
size?: number; // Optional: File size in bytes (only applicable for files)
|
|
96
|
-
|
|
140
|
+
[key: string]: any; // Optional: Any custom fields your application needs
|
|
141
|
+
}
|
|
97
142
|
```
|
|
98
143
|
|
|
99
144
|
## ⚙️ Props
|
|
100
145
|
|
|
101
146
|
| Name | Type | Description |
|
|
102
147
|
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
103
|
-
| `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. |
|
|
148
|
+
| `acceptedFileTypes` | string | (Optional) A comma-separated list of allowed file extensions for uploading specific file types (e.g., `.txt, .png, .pdf`). Extensions match regardless of case, and MIME types such as `image/*` also work. If omitted, all file types are accepted. |
|
|
104
149
|
| `className` | string | CSS class names to apply to the FileManager root element. |
|
|
105
150
|
| `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`. |
|
|
106
151
|
| `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`. |
|
|
107
152
|
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager `default: true`. |
|
|
108
153
|
| `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`. |
|
|
109
|
-
| `filePreviewComponent` | (file: [
|
|
110
|
-
| `fileUploadConfig` | { url: string; method?: "POST" \| "PUT"; headers?: { [key: string]: string } }
|
|
111
|
-
| `files` | Array<[
|
|
154
|
+
| `filePreviewComponent` | (file: [FileItem](#-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). |
|
|
155
|
+
| `fileUploadConfig` | { url: string; method?: "POST" \| "PUT"; headers?: { [key: string]: string }; withCredentials?: boolean } | 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. The `withCredentials` property allows sending HTTP cookies in the request. Example: `{ url: "https://example.com/fileupload", method: "PUT", headers: { Authorization: "Bearer " + TOKEN, "X-Custom-Header": "value" }, withCredentials: true }` |
|
|
156
|
+
| `files` | Array<[FileItem](#-file-structure)> | An array of file and folder objects representing the current directory structure. Each object includes `name`, `isDirectory`, and `path` properties. |
|
|
112
157
|
| `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
|
-
| `formatDate` | (date: string
|
|
158
|
+
| `formatDate` | (date: string) => string | (Optional) A custom function used to format file and folder modification dates. If omitted, the component falls back to its built-in formatter. Useful for adapting the date display to different locales or formats. |
|
|
114
159
|
| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
|
|
115
160
|
| `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 `""` |
|
|
116
161
|
| `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
|
-
| `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> 🇩🇰 `da-DK` (Danish, Denmark) <br> 🇩🇪 `de-DE` (German, Germany) <br> 🇺🇸 `en-US` (English, United States) <br> 🇪🇸 `es-ES` (Spanish, Spain) <br> 🇮🇷 `fa-IR` (Persian, Iran) <br> 🇫🇮 `fi-FI` (Finnish, Finland) <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> 🇳🇴 `nb-NO` (Norwegian, Norway) <br> 🇧🇷 `pt-BR` (Portuguese, Brazil) <br> 🇵🇹 `pt-PT` (Portuguese, Portugal) <br> 🇷🇺 `ru-RU` (Russian, Russia) <br> 🇸🇪 `sv-SE` (Swedish, Sweden) <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) |
|
|
162
|
+
| `language` | string (`Language` type in TypeScript) | 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. In TypeScript, only the codes listed below are accepted. <br><br>**Available languages:** <br> 🇸🇦 `ar-SA` (Arabic, Saudi Arabia) <br> 🇩🇰 `da-DK` (Danish, Denmark) <br> 🇩🇪 `de-DE` (German, Germany) <br> 🇺🇸 `en-US` (English, United States) <br> 🇪🇸 `es-ES` (Spanish, Spain) <br> 🇮🇷 `fa-IR` (Persian, Iran) <br> 🇫🇮 `fi-FI` (Finnish, Finland) <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> 🇳🇴 `nb-NO` (Norwegian, Norway) <br> 🇧🇷 `pt-BR` (Portuguese, Brazil) <br> 🇵🇹 `pt-PT` (Portuguese, Portugal) <br> 🇷🇺 `ru-RU` (Russian, Russia) <br> 🇸🇪 `sv-SE` (Swedish, Sweden) <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
163
|
| `layout` | "list" \| "grid" | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid". |
|
|
119
164
|
| `maxFileSize` | number | For limiting the maximum upload file size in bytes. |
|
|
120
|
-
| `onCopy` | (files: Array<[
|
|
121
|
-
| `onCut` | (files: Array<[
|
|
122
|
-
| `onCreateFolder` | (name: string, parentFolder: [
|
|
123
|
-
| `onDelete` | (files: Array<[
|
|
124
|
-
| `onDownload` | (files: Array<[
|
|
125
|
-
| `onError` | (error: { type: string, message: string }, file: [
|
|
126
|
-
| `onFileOpen` | (file: [
|
|
165
|
+
| `onCopy` | (files: Array<[FileItem](#-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. |
|
|
166
|
+
| `onCut` | (files: Array<[FileItem](#-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. |
|
|
167
|
+
| `onCreateFolder` | (name: string, parentFolder: [FileItem](#-file-structure)) => void \| [FileItem](#-file-structure) \| Promise<void \| [FileItem](#-file-structure)> | 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. Folder uploads also use it to create subfolders: return the created folder (or a promise of it) so files can upload into it right away. If nothing is returned, the file manager waits for the folder to appear in `files`. Throw or reject if the folder can't be created. |
|
|
168
|
+
| `onDelete` | (files: Array<[FileItem](#-file-structure)>) => void | A callback function is triggered when one or more files or folders are deleted. |
|
|
169
|
+
| `onDownload` | (files: Array<[FileItem](#-file-structure)>) => void | A callback function triggered when one or more files or folders are downloaded. |
|
|
170
|
+
| `onError` | (error: { type: string, message: string }, file: [FileItem](#-file-structure) \| File) => void | A callback function triggered whenever there is an error in the file manager. Where error is an object containing `type` ("upload", "createFolder", etc.) and a descriptive error `message`. |
|
|
171
|
+
| `onFileOpen` | (file: [FileItem](#-file-structure)) => void | A callback function triggered when a file or folder is opened. |
|
|
127
172
|
| `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. |
|
|
128
173
|
| `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)]);` |
|
|
129
|
-
| `onFileUploading` | (file:
|
|
174
|
+
| `onFileUploading` | (file: File, parentFolder: [FileItem](#-file-structure)) => { [key: string]: any } | A callback function triggered during the file upload process, receiving the browser `File` being uploaded. 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. For folder uploads, `parentFolder` is the subfolder the file is uploaded into. |
|
|
130
175
|
| `onLayoutChange` | (layout: "list" \| "grid") => void | A callback function triggered when the layout of the file manager is changed. |
|
|
131
|
-
| `onPaste` | (files: Array<[
|
|
176
|
+
| `onPaste` | (files: Array<[FileItem](#-file-structure)>, destinationFolder: [FileItem](#-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
177
|
| `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. |
|
|
133
|
-
| `onRename` | (file: [
|
|
134
|
-
| `onSelectionChange` | (files: Array<[
|
|
135
|
-
| `onSelect`⚠️(deprecated) | (files: Array<[
|
|
178
|
+
| `onRename` | (file: [FileItem](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
|
|
179
|
+
| `onSelectionChange` | (files: Array<[FileItem](#-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. |
|
|
180
|
+
| `onSelect`⚠️(deprecated) | (files: Array<[FileItem](#-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`. |
|
|
181
|
+
| `onSortChange` | (sortConfig: { key: "name" \| "modified" \| "size", direction: "asc" \| "desc" }) => void | (Optional) A callback function triggered when the sorting order changes. Receives the new sort configuration with the column key and direction. Useful for persisting sort preferences or updating external state. |
|
|
136
182
|
| `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
183
|
| `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`. |
|
|
138
184
|
| `style` | object | Inline styles applied to the FileManager root element. |
|
|
185
|
+
| `uploadConcurrency` | number | The maximum number of files uploaded at the same time. Remaining files wait in a queue. `default: 4`. |
|
|
139
186
|
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
|
|
140
187
|
|
|
141
188
|
## ⌨️ Keyboard Shortcuts
|
|
@@ -180,6 +227,41 @@ if not specified.
|
|
|
180
227
|
/>
|
|
181
228
|
```
|
|
182
229
|
|
|
230
|
+
## 📁 Folder Uploads
|
|
231
|
+
|
|
232
|
+
Users can upload a whole folder, including its subfolders, by choosing **Upload → Upload folder**
|
|
233
|
+
(toolbar, context menu, or the upload dialog) or by dragging a folder into the upload dialog.
|
|
234
|
+
|
|
235
|
+
No extra backend endpoint is needed. The file manager recreates the folder structure with your
|
|
236
|
+
`onCreateFolder` callback, then uploads each file to `fileUploadConfig.url` with its own subfolder
|
|
237
|
+
as `parentFolder` in `onFileUploading`:
|
|
238
|
+
|
|
239
|
+
```tsx
|
|
240
|
+
const handleCreateFolder: OnCreateFolder = async (name, parentFolder) => {
|
|
241
|
+
const response = await api.post("/folder", { name, parentId: parentFolder?._id });
|
|
242
|
+
setFiles((prev) => [...prev, response.data]);
|
|
243
|
+
return response.data; // Lets folder uploads continue into the new folder right away
|
|
244
|
+
};
|
|
245
|
+
|
|
246
|
+
const handleFileUploading: OnFileUploading = (file, parentFolder) => {
|
|
247
|
+
return { parentId: parentFolder?._id }; // The subfolder this file belongs in
|
|
248
|
+
};
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
- Throw (or reject) from `onCreateFolder` when a folder can't be created. The files waiting on it
|
|
252
|
+
then fail right away and can be retried. If it returns nothing without throwing, the file manager
|
|
253
|
+
waits up to 30 seconds for the folder to appear in `files` before failing those files.
|
|
254
|
+
- Folders that already exist are reused, so uploading into an existing folder merges into it.
|
|
255
|
+
- Subfolders are created parent-first. Files start uploading as soon as their folder exists.
|
|
256
|
+
- Uploads run `uploadConcurrency` at a time (default `4`). Each file can be canceled or retried.
|
|
257
|
+
- In the upload dialog, each folder shows as one row with its combined progress. Expand it to see
|
|
258
|
+
every file, with failed files listed first. The whole folder can be canceled, and failed files
|
|
259
|
+
retried, from that row.
|
|
260
|
+
- `maxFileSize`, `acceptedFileTypes` and the existing-file check apply to every file in the folder.
|
|
261
|
+
- Folder upload is available when `onCreateFolder` is provided and both the `create` and `upload`
|
|
262
|
+
permissions are enabled. Otherwise the Upload button works as before and dropped folders are
|
|
263
|
+
skipped with an `onError` call.
|
|
264
|
+
|
|
183
265
|
## </> Custom File Preview
|
|
184
266
|
|
|
185
267
|
The `FileManager` component allows you to provide a custom file preview by passing the
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { JSX } from 'react';
|
|
2
|
+
|
|
3
|
+
export declare interface FileItem {
|
|
4
|
+
name: string;
|
|
5
|
+
isDirectory: boolean;
|
|
6
|
+
path: string;
|
|
7
|
+
updatedAt?: string;
|
|
8
|
+
size?: number;
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
declare const FileManager: {
|
|
13
|
+
({ files, fileUploadConfig, isLoading, onCreateFolder, onFileUploading, onFileUploaded, onCut, onCopy, onPaste, onRename, onDownload, onDelete, onLayoutChange, onRefresh, onFileOpen, onFolderChange, onSelect, onSelectionChange, onError, onSortChange, layout, enableFilePreview, maxFileSize, uploadConcurrency, filePreviewPath, acceptedFileTypes, height, width, initialPath, filePreviewComponent, primaryColor, fontFamily, language, permissions: userPermissions, collapsibleNav, defaultNavExpanded, className, style, formatDate, }: FileManagerProps): JSX.Element;
|
|
14
|
+
displayName: string;
|
|
15
|
+
};
|
|
16
|
+
export { FileManager }
|
|
17
|
+
export default FileManager;
|
|
18
|
+
|
|
19
|
+
export declare interface FileManagerProps {
|
|
20
|
+
files?: FileItem[];
|
|
21
|
+
fileUploadConfig?: FileUploadConfiguration;
|
|
22
|
+
isLoading?: boolean;
|
|
23
|
+
onCreateFolder?: OnCreateFolder;
|
|
24
|
+
onFileUploading?: OnFileUploading;
|
|
25
|
+
onFileUploaded?: OnFileUploaded;
|
|
26
|
+
onCut?: OnCut;
|
|
27
|
+
onCopy?: OnCopy;
|
|
28
|
+
onPaste?: OnPaste;
|
|
29
|
+
onRename?: OnRename;
|
|
30
|
+
onDownload?: OnDownload;
|
|
31
|
+
onDelete?: OnDelete;
|
|
32
|
+
onLayoutChange?: OnLayoutChange;
|
|
33
|
+
onRefresh?: OnRefresh;
|
|
34
|
+
onFileOpen?: OnFileOpen;
|
|
35
|
+
onFolderChange?: OnFolderChange;
|
|
36
|
+
/** @deprecated Use `onSelectionChange` instead. */
|
|
37
|
+
onSelect?: OnSelect;
|
|
38
|
+
onSelectionChange?: OnSelectionChange;
|
|
39
|
+
onError?: OnError;
|
|
40
|
+
onSortChange?: OnSortChange;
|
|
41
|
+
layout?: Layout;
|
|
42
|
+
enableFilePreview?: boolean;
|
|
43
|
+
maxFileSize?: number;
|
|
44
|
+
uploadConcurrency?: number;
|
|
45
|
+
filePreviewPath?: string;
|
|
46
|
+
acceptedFileTypes?: string;
|
|
47
|
+
height?: string | number;
|
|
48
|
+
width?: string | number;
|
|
49
|
+
initialPath?: string;
|
|
50
|
+
filePreviewComponent?: FilePreviewComponent;
|
|
51
|
+
primaryColor?: string;
|
|
52
|
+
fontFamily?: string;
|
|
53
|
+
language?: Language;
|
|
54
|
+
permissions?: Permissions_2;
|
|
55
|
+
collapsibleNav?: boolean;
|
|
56
|
+
defaultNavExpanded?: boolean;
|
|
57
|
+
className?: string;
|
|
58
|
+
style?: React.CSSProperties;
|
|
59
|
+
formatDate?: (date: string) => string;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
export declare type FilePreviewComponent = (file: FileItem) => React.ReactNode;
|
|
63
|
+
|
|
64
|
+
export declare interface FileUploadConfiguration {
|
|
65
|
+
url: string;
|
|
66
|
+
method?: "POST" | "PUT";
|
|
67
|
+
headers?: {
|
|
68
|
+
[key: string]: string;
|
|
69
|
+
};
|
|
70
|
+
withCredentials?: boolean;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export declare type Language = "ar-SA" | "da-DK" | "de-DE" | "en-US" | "es-ES" | "fa-IR" | "fi-FI" | "fr-FR" | "he-IL" | "hi-IN" | "it-IT" | "ja-JP" | "ko-KR" | "nb-NO" | "pt-BR" | "pt-PT" | "ru-RU" | "sv-SE" | "tr-TR" | "uk-UA" | "ur-UR" | "vi-VN" | "zh-CN" | "pl-PL";
|
|
74
|
+
|
|
75
|
+
export declare type Layout = "grid" | "list";
|
|
76
|
+
|
|
77
|
+
export declare type OnCopy = (files: FileItem[]) => void;
|
|
78
|
+
|
|
79
|
+
export declare type OnCreateFolder = (name: string, parentFolder: FileItem) => void | FileItem | Promise<void | FileItem>;
|
|
80
|
+
|
|
81
|
+
export declare type OnCut = (files: FileItem[]) => void;
|
|
82
|
+
|
|
83
|
+
export declare type OnDelete = (files: FileItem[]) => void;
|
|
84
|
+
|
|
85
|
+
export declare type OnDownload = (files: FileItem[]) => void;
|
|
86
|
+
|
|
87
|
+
export declare type OnError = (error: {
|
|
88
|
+
type: string;
|
|
89
|
+
message: string;
|
|
90
|
+
}, file: FileItem | File) => void;
|
|
91
|
+
|
|
92
|
+
export declare type OnFileOpen = (file: FileItem) => void;
|
|
93
|
+
|
|
94
|
+
export declare type OnFileUploaded = (response: {
|
|
95
|
+
[key: string]: any;
|
|
96
|
+
} | any) => void;
|
|
97
|
+
|
|
98
|
+
export declare type OnFileUploading = (file: File, parentFolder: FileItem) => {
|
|
99
|
+
[key: string]: any;
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
export declare type OnFolderChange = (path: string) => void;
|
|
103
|
+
|
|
104
|
+
export declare type OnLayoutChange = (layout: Layout) => void;
|
|
105
|
+
|
|
106
|
+
export declare type OnPaste = (files: FileItem[], destinationFolder: FileItem, operationType: "copy" | "move") => void;
|
|
107
|
+
|
|
108
|
+
export declare type OnRefresh = () => void;
|
|
109
|
+
|
|
110
|
+
export declare type OnRename = (file: FileItem, newName: string) => void;
|
|
111
|
+
|
|
112
|
+
export declare type OnSelect = (files: FileItem[]) => void;
|
|
113
|
+
|
|
114
|
+
export declare type OnSelectionChange = (files: FileItem[]) => void;
|
|
115
|
+
|
|
116
|
+
export declare type OnSortChange = (sortConfig: SortConfiguration) => void;
|
|
117
|
+
|
|
118
|
+
declare interface Permissions_2 {
|
|
119
|
+
create?: boolean;
|
|
120
|
+
upload?: boolean;
|
|
121
|
+
move?: boolean;
|
|
122
|
+
copy?: boolean;
|
|
123
|
+
rename?: boolean;
|
|
124
|
+
download?: boolean;
|
|
125
|
+
delete?: boolean;
|
|
126
|
+
}
|
|
127
|
+
export { Permissions_2 as Permissions }
|
|
128
|
+
|
|
129
|
+
export declare interface SortConfiguration {
|
|
130
|
+
key: SortKey;
|
|
131
|
+
direction: SortDirection;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
declare type SortDirection = "asc" | "desc";
|
|
135
|
+
|
|
136
|
+
declare type SortKey = "name" | "modified" | "size";
|
|
137
|
+
|
|
138
|
+
export { }
|