Web-based resource (file, folder) reading tool If this library is helpful to you, I look forward to Star encouragement
简体中文 | English
A tool built into web applications that facilitates resource (file and folder) reading, making development tasks more efficient and enjoyable.
Key Features:
- Drag-and-Drop Support: Allows users to drag and drop files and folders directly into the tool, simplifying resource import.
- Clipboard Support: Supports copying and pasting files from the clipboard.
- System File and Folder Selection: Enables users to select files or folders directly from their system.
- Multiple Data Formats: Offers data in two formats - as an array or in a tree structure, catering to different use cases.
- Read-Only files Mode: Supports read-only access to files.
- Real-Time Filtering: Provides real-time filtering of files and folders, making it easier to locate specific resources.
- Rule Validation: Offers real-time validation of file rules; if a file doesn't meet the specified criteria, the operation can be interrupted.
- Folder Size Tracking: Automatically calculates and displays the total size of all files within each level of a folder.
- Customizable UI Hooks: Exposes drag-and-drop hover and leave hooks, allowing for UI customization and enhanced user experiences.
- Install the
d-resoucedependency
npm install d-resouce- Instantiate the
ResHandle
import { ResHandle } from "d-resouce";
const resHandle = new ResHandle(options);- Use helper functions
import { selectResource, selectFileChange, selectFolderChange, filterSize } from "d-resouce"| Field | Type | Description | params |
|---|---|---|---|
| targetDom | HTMLElement | The DOM element associated with the drag-and-drop event | ---- |
| dragoverFuc | Function | Hover event for the drag-and-drop object | Event object |
| dragleaveFuc | Function | Leave event for the drag-and-drop object | Event object |
| beforeReadFuc | Function | Hook function for reading drag-and-drop or paste events before data is read | ---- |
| readDataFuc | Function | Hook function for reading drag-and-drop or paste events' results | Data assembled according to the specified mode |
| validFuc | Function | All resources read are passed to this function; returning false aborts the read operation | File: size、fullPath、name、type、file |
| filterFuc | Function | All resources read are passed to this function; returning false filters out the resource. Note: Filtering out a folder will exclude its contents from the read | Two types: files (parameters as in validFuc) and folders: totalSize, fullPath, name, type, file, children |
| mode | String | Value can be 'array' or 'tree' | ---- |
| onlyFile | Boolean | Indicates whether to read only files, ignoring folders | ---- |
| targetDom | HTMLElement | The DOM element associated with the drag-and-drop event | ---- |
| Field | Type | Description | Enter params | Return params |
|---|---|---|---|---|
| selectResource | Function | Opens the system resource dialog for selecting resources | 1. Whether it's a directory upload 2. An object with additional attributes for the <input type="file>, for example: { multiple: true } | Native reading results |
| selectFolderChange | Function | Handles folder upload and assembles data according to the specified mode | 1. Results from folder upload 2. Mode type ('array' or 'tree'). | Processed results |
| selectFileChange | Function | Handles file upload results (without hierarchy) and does not require specifying a mode | 1. Results from file upload 2.Custom formatting method | Processed results (default format according to readDataFuc) |
| filterSize | Function | Converts file sizes to specific units (B, KB, MB, GB, TB) | 1.File size | Size as a string with units (e.g., "2.5 MB") |
wetChat: yl66915 qq email: [email protected]