我有一个电子应用程序,我希望用户能够拖动文件到。我只希望他们能够拖动某些类型的文件(例如只有.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();
});
更新
显然这在电子1.7之前一直有效
https://github.com/electron/electron/issues/9840
