🔦 d-resouce

Web-based resource (file, folder) reading tool If this library is helpful to you, I look forward to Star encouragement

简体中文 | English

🎲 Support

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.

🛵 Use

1. Install the d-resouce dependency

npm install d-resouce

2. Instantiate the ResHandle

import { ResHandle } from "d-resouce";

const resHandle = new ResHandle(options);

3. Use helper functions

import { selectResource, selectFileChange, selectFolderChange, filterSize } from "d-resouce"

📒 Document

options

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	----

other

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: [e-mail]