Support for file drop on plugin UI

You know, I think I got confused with all the file drop talk in the API docs and assumed I had to use that stuff to support file drop in my plugin UI.

It appears I don’t.

And what tripped me up further was not understanding that I need to prevent default behavior of dragenter and dragover events.

Anyway, for posterity, here is how I have it working (roughly). I think you could just attach these listeners to document if you want to allow dropping on your entire plugin UI.

document.getElementById("dropzone").addEventListener("dragenter", event => {
  event.preventDefault();
});

document.getElementById("dropzone").addEventListener("dragover", event => {
  event.preventDefault();
});

document.getElementById("dropzone").addEventListener("drop", async event => {
  event.preventDefault();
  
  let drop_file = null;
  
  if(event.dataTransfer.items) {
    for(let item of event.dataTransfer.items) {
      if(item.kind === "file") {
        drop_file = item.getAsFile();
        break;
      }
    }
  }
  else {
    for(let f of event.dataTransfer.files) {
      drop_file = f;
      break;
    }
  }
  
  if(!drop_file) {
    return;
  }
  
  // If you want to load this into an Image perhaps, use this as src:
  let url = URL.createObjectURL(drop_file);
});