我有一个电子应用程序,希望用户能够将文件拖到其中。我只希望它们能够拖入某些类型的文件(例如,仅.xlsx和.docx),所以我想发出在删除文件之前的警告。不幸的是,我没有办法知道他们当前正在拖动的文件的类型。
某些代码
const dragElem = document.body;
dragElem.addEventListener('drag', () => {
console.log('drag');
});
dragElem.addEventListener('dragstart', () => {
console.log('dragstart');
});
dragElem.addEventListener('dragenter', (e) => {
console.log('dragenter');
console.log(e);
showFiles(e);
});
dragElem.addEventListener('dragexit', () => {
console.log('dragexit');
});
dragElem.addEventListener('dragover', (e) => {
e.preventDefault();
console.log('dragover');
console.log(e);
showFiles(e);
return false;
});
dragElem.addEventListener('dragleave', () => {
console.log('dragleave');
return false;
});
dragElem.addEventListener('dragend', () => {
console.log('dragend');
return false;
});
dragElem.addEventListener('drop', (e) => {
console.log('drop');
e.preventDefault();
showFiles(e);
return false;
});
function showFiles(e) {
for (let f of e.dataTransfer.types) {
console.log('Types(s) you dragged here: ', f);
}
for (let f of e.dataTransfer.items) {
console.log('Items(s) you dragged here: ', f.kind, f.type);
}
for (let f of e.dataTransfer.files) {
console.log('File(s) you dragged here: ', f.path);
}
}
drag something here
当我拖动不同类型时,我在event.dataTransform.items
中得到了一些信息,但还不够
foo.exe application/x-msdowload
foo.txt text/plain
foo.json <empty string>
foo.xlsx <empty string>
foo.docx <empty string>
foo.png image/png
类型没有提供足够的信息。直到用户删除文件为时已晚,才提供文件名。我想知道在删除文件之前,还是想通过扩展名过滤它们允许删除的内容,并在他们拖动其选择不适合过滤器的事件时得到一个事件。
换句话说。
dragElem.addEventListner('dragenter', (e) => {
if (notExcelAndNotMSWordFile(e)) {
showWarning(); // change CSS to show waring
}
});
或
dragElem.setMagicFilter = /\.(xslx/.docx)$/;
dragElem.addEventListener('dragbadmagic', () => {
showWarning();
});
是否可以在Electron中实现阻力过滤器?也许是一种为mime类型映射添加扩展名的方法,或者使我获得比目前更多的信息?
显然,它一直工作到Electron 1.7为止