New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@cubone/react-file-manager
Advanced tools
@cubone/react-file-manager - npm Package Compare versions
Comparing version 1.6.0 to 1.7.0
| { | ||
| "name": "@cubone/react-file-manager", | ||
| "private": false, | ||
| "version": "1.6.0", | ||
| "version": "1.7.0", | ||
| "type": "module", | ||
@@ -41,3 +41,3 @@ "module": "dist/react-file-manager.es.js", | ||
| }, | ||
| "description": "The File Manager Component is an open-source React.js package designed to help developers easily integrate a file manager into their applications. This component provides a user-friendly interface along with essential functionalities for managing files and folders, such as viewing, uploading and deleting within a specified directory structure. Ideal for anyone looking to build or enhance a file management system, this package offers both UI and backend integration capabilities.", | ||
| "description": "React File Manager is an open-source, user-friendly component designed to easily manage files and folders within applications. With smooth drag-and-drop functionality, responsive design, and efficient navigation, it simplifies file handling in any React project.", | ||
| "main": "src/index.js", | ||
@@ -51,3 +51,4 @@ "repository": { | ||
| "file-manager", | ||
| "component" | ||
| "component", | ||
| "react-file explorer" | ||
| ], | ||
@@ -54,0 +55,0 @@ "author": "Saifullah Zubair", |
@@ -1,4 +0,13 @@ | ||
|  | ||
|  | ||
| <div align="center"> | ||
|    | ||
| </div> | ||
| <br> | ||
| <p> | ||
| 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. | ||
| </p> | ||
@@ -24,3 +33,3 @@ ## ✨ Features | ||
| ```javascript | ||
| ```jsx | ||
| import { useState } from "react"; | ||
@@ -36,9 +45,9 @@ import { FileManager } from "@cubone/react-file-manager"; | ||
| path: "/Documents", // Located in Root directory | ||
| updatedAt: "2024-09-09T10:30:00Z", // Last updated time (ISO 8601 format) | ||
| updatedAt: "2024-09-09T10:30:00Z", // Last updated time | ||
| }, | ||
| { | ||
| name: "Pictures", | ||
| isDirectory: true, // Folder | ||
| path: "/Pictures", // Located in Root directory | ||
| updatedAt: "2024-09-09T11:00:00Z", // Last updated time (ISO 8601 format) | ||
| isDirectory: true, | ||
| path: "/Pictures", // Located in Root directory as well | ||
| updatedAt: "2024-09-09T11:00:00Z", | ||
| }, | ||
@@ -49,3 +58,3 @@ { | ||
| path: "/Pictures/Pic.png", // Located inside the "Pictures" folder | ||
| updatedAt: "2024-09-08T16:45:00Z", // Last updated time (ISO 8601 format) | ||
| updatedAt: "2024-09-08T16:45:00Z", | ||
| size: 2048, // File size in bytes (example: 2 KB) | ||
@@ -61,2 +70,4 @@ }, | ||
| } | ||
| export default App; | ||
| ``` | ||
@@ -70,26 +81,35 @@ | ||
| type File = { | ||
| name: string; | ||
| isDirectory: boolean; | ||
| path: string; | ||
| updatedAt?: string; | ||
| size?: number; | ||
| name: string; // The name of the file or folder | ||
| isDirectory: boolean; // `true` if it's a folder, `false` if it's a file | ||
| path: string; // Full path of the file or folder | ||
| updatedAt?: string; // Optional: Last update timestamp in ISO 8601 format | ||
| size?: number; // Optional: File size in bytes (only applicable for files) | ||
| }; | ||
| ``` | ||
| Here is the updated table with the props sorted in ascending order by name: | ||
| ## ⚙️ Props | ||
| | Name | Type | Description | | ||
| | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `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. | | ||
| | `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`. | | ||
| | `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" } }` | | ||
| | `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`. | | ||
| | `allowedFileExtensions` | String | A comma-separated list of allowed file extensions for uploading files. (e.g., `.txt, .png, .pdf`). | | ||
| | `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. | | ||
| | `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. | | ||
| | `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)]);` | | ||
| | `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. | | ||
| | `onDelete` | (file: [File](#-file-structure)) => void | A callback function triggered when a file or folder is deleted. | | ||
| | `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. | | ||
| | `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. | | ||
| | Name | Type | Description | | ||
| | ------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `acceptedFileTypes` | String | A comma-separated list of allowed file extensions for uploading files. (e.g.,`.txt, .png, .pdf`). | | ||
| | `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager. | | ||
| | `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`. | | ||
| | `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" } }` | | ||
| | `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. | | ||
| | `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`. | | ||
| | `layout` | "list" \| "grid" | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid". | | ||
| | `maxFileSize` | number | For limiting the maximum upload file size in bytes. | | ||
| | `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. | | ||
| | `onDelete` | (file: [File](#-file-structure)) => void | A callback function triggered when a file or folder is deleted. | | ||
| | `onDownload` | (file: [File](#-file-structure)) => void | A callback function triggered when a file is downloaded. | | ||
| | `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`. | | ||
| | `onFileOpen` | (file: [File](#-file-structure)) => void | A callback function triggered when a file or folder is opened. | | ||
| | `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)]);` | | ||
| | `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. | | ||
| | `onLayoutChange` | (layout: "list" \| "grid") => void | A callback function triggered when the layout of the file manager is changed. | | ||
| | `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. | | ||
| | `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. | | ||
| | `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. | | ||
@@ -96,0 +116,0 @@ ## 🤝 Contributing |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by3.13%
241764
- Lines of code
- increased by2.54%
4926
- Number of lines in readme file
- increased by17.24%
136
- Published versions last months
- increased by8.33%
13
No dependency changes