4

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

https://github.com/electron/electron/issues/9840

gman
  • 100,619
  • 31
  • 269
  • 393
  • Dunno electron, so won't be able to help, but you'd probably be better do your check in dragenter rather than in the many dragovers you'll get. Also, since, it is by specs that you can't access the *data* from the *drag data store* of other events than dragstart and drop, filling the UA's mime-type registry might indeed be the best workaround. – Kaiido Aug 07 '18 at 08:34
  • This might be useful: https://stackoverflow.com/questions/11065803/determine-what-is-being-dragged-from-dragenter-dragover-events – Ivan Yurov Aug 08 '18 at 05:49

0 Answers0