There is one feature I don’t entirely sure how to implement. How do I enable drag-and-drop of files from the 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 I know it’s possible. I was not able to find any third-party extensions that implement something like this, or relevant documentation on that topic.
If you create a custom widget and open it on the right hand side,
Assuming its a React component/widget which implemented your drag drop code.
It will have the ‘drag drop here’ area.
The left side folders area will show whichever files / folders/ images you have ,
So the user has to select → drag it over to the right and simply drop.
Now the react component’s ts/js code should take care of processing this file, etc ,etc
PS: I haven’t tried it yet, Just Thinking out loud
The Elyra project actually has implemented a drag-and-drop feature from the file browser to their extension. I believe the key is to define a custom dropzone to avoid the behavior you mentioned. Here is the specific code for the dropzone you can try to get inspired. The rest of the relevant code is in the PipelineEditorWidget.