Support for file drop on plugin UI

Plugin and Widget API Questions
1

I can’t seem to find a way to support accepting a file drop on just my plugin UI. I would expect to be able to handle this via document.addEventListener("drop", () => {}); however it doesn’t appear to be called.

When I use the API figma.on("drop") I can get file information however it seems to takeover all file drag and drop from Figma. So as a customer I can’t say drag an image file into my Figma document and then later drag another file into my plugin’s window seprately.

Perhaps I’m missing something. Perhaps this is not yet implemented. If not, are there plans to support this?

Thanks!

2

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);
});
1 Like