110 lines
2.0 KiB
TypeScript
110 lines
2.0 KiB
TypeScript
import config from "@/config";
|
|
|
|
const { uploadSizeLimit } = config;
|
|
|
|
export type dropHandlerHooks = {
|
|
/**
|
|
* 仅返回小于config.ts中大小限制的文件，不会返回文件夹
|
|
*/
|
|
onDropFiles?: (files: File[]) => void;
|
|
/**
|
|
* 当拖动时
|
|
*/
|
|
onOver?: () => void;
|
|
/**
|
|
* 当进入时
|
|
*/
|
|
onEnter?: () => void;
|
|
|
|
/**
|
|
* 当离开时
|
|
*/
|
|
onLeave?: () => void;
|
|
|
|
/**
|
|
* 离开或是放下时都会触发
|
|
* @returns {any}
|
|
*/
|
|
onEnd?: () => void;
|
|
};
|
|
|
|
const isFile = (file: File) =>
|
|
new Promise(resolve => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
resolve(true);
|
|
reader.abort();
|
|
};
|
|
reader.onerror = () => {
|
|
resolve(false);
|
|
reader.abort();
|
|
};
|
|
reader.readAsText(file);
|
|
});
|
|
|
|
/**
|
|
* 只保留文件，移去文件夹
|
|
* @param {File[]} files
|
|
*/
|
|
const filesFilter = async (files: File[]) => {
|
|
let index = 0;
|
|
while (index < files.length) {
|
|
const currentFile = files[index];
|
|
const _isFile = await isFile(currentFile);
|
|
if (_isFile) {
|
|
index += 1;
|
|
continue;
|
|
} else {
|
|
files.splice(index, 1);
|
|
continue;
|
|
}
|
|
}
|
|
};
|
|
|
|
export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
|
|
dom.addEventListener(
|
|
"dragenter",
|
|
function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
hooks?.onEnter && hooks?.onEnter();
|
|
},
|
|
false
|
|
);
|
|
|
|
dom.addEventListener(
|
|
"dragover",
|
|
function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
hooks?.onOver && hooks?.onOver();
|
|
},
|
|
false
|
|
);
|
|
|
|
dom.addEventListener(
|
|
"dragleave",
|
|
function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
hooks?.onLeave && hooks?.onLeave();
|
|
hooks?.onEnd && hooks.onEnd();
|
|
},
|
|
false
|
|
);
|
|
|
|
dom.addEventListener(
|
|
"drop",
|
|
async function (e) {
|
|
// console.log(e, e.dataTransfer?.types);
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const files = [...(e.dataTransfer?.files ?? [])].filter(file => file.size < uploadSizeLimit);
|
|
await filesFilter(files);
|
|
hooks?.onDropFiles && hooks.onDropFiles(files);
|
|
hooks?.onEnd && hooks.onEnd();
|
|
},
|
|
false
|
|
);
|
|
}
|