Files Drag and Drop
npm i filednd
# or
yarn add filednd
<script src="https://unpkg.com/filednd/dist/filednd.js"></script>
import {
FileDND
} from 'filednd';
const fdnd = new FileDND(document.querySelector('#zone'));
// if you use cdn
// const fdnd = new filednd.FileDND(document.querySelector('#zone'));
listen htmlelement drag and drop
fdnd.dnd((files) => {
console.log(files);
});
Convert file collection structure to tree data structure
const treeData = fdnd.toTree();
Convert file tree to markdown directory text
const text = fdnd.toFolderTree();
src
| assets
| | vue.svg
| components
| | HelloWorld.vue
| App.vue
| common.js
| draw.vue
| fly.vue
| main.js
| style.css
clear all files
fdnd.clear();
fdnd.dispose();
const readStart = () => {
}
fdnd.on('readstart', readStart)
// fdnd.off('readstart', readStart)
const readEnd = () => {
}
fdnd.on('readend', readEnd)
// fdnd.off('readstart', readEnd)
file-type If you want to determine the file type, you can refer to this library