I have an electron app I want the user to be able to drag files into. I only want them to be able to drag in certain kinds of files (for example only .xlsx and .docx) so I'd like to issue a warning BEFORE THEY DROP THE FILE. Unfortunately I don't see a way to know the types of the files they are currently dragging.
Some code
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
when I drag different types I get some info in event.dataTransform.items
but not enough
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
The types do not give enough info. The filenames are not provided until the user drops the file(s) which is too late. I want to know before they drop the file(s) OR I want to be able to filter by extension what they are allowed to drop and get an event as they are dragging that their selection doesn't fit the filter.
In other words.
dragElem.addEventListner('dragenter', (e) => {
if (notExcelAndNotMSWordFile(e)) {
showWarning(); // change CSS to show waring
}
});
Or
dragElem.setMagicFilter = /\.(xslx/.docx)$/;
dragElem.addEventListener('dragbadmagic', () => {
showWarning();
});
Is it possible to implement a drag filter in Electron? Maybe a way to add an extension to mime-type mapping or something so that I get more info than I'm currently getting?
update
apparently this used to work until Electron 1.7