Implementing drag-and-drop between file browser and custom widget extension

[ktaletsk]

We would like to enable drag-and-drop of files from the JupyterLab file browser on the left into our custom widget in the cell output.

There are some built-in integrations, i.e. for MIME, dragging the file to open a new panel, or for markdown cells, allowing you to drag the image into the Jupyter cell and it will create the code to show the image (![/path]), so it should possible. There are seem to be no third-party extensions that implement something like this, or relevant documentation on that topic.

To demonstrate the issue, we created two clips. In the first clip, the file drop is made using the OS finder and it successfully allows loading the file as expected by dropping into the widget, further updating the state.

clip-1.mov

In the second clip, the file drop is being made using the JupyterLab file browser on the left pane. Upon hovering the file over the cell output or the widget, the UI provides drop zones to separately load the file in a new panel but does not allow to drop and load the file into the widget.

clip-2.mov