Grab path of file which is dragged and dropped from the file browser

JupyterLab extensions
,
1

Hi,

I have created a custom JupyterLab 4 extension. The extension includes a drag and drop feature which allows to drag files from the JupyterLab file browser on the left pane into the drop zone inside the widget or the code cell output.

I am trying to capture the path of the files which are dragged and dropped from the JupyterLab file browser when a drop event has been initiated.
Since I am dragging the files from the JupyterLab file browser instance, I am unable to use the usual html e.dataTransfer.files function to get file information as it returns undefined.

I tried using the defaultBrowser property of the IFileBrowserFactory interface from the filebrowser module to capture the selected files but that does not return anything either.

Below snippet handles the file drop within the extension.

    const fileDrop = async (e: IDragEvent): Promise<void> => {
      // Log the dropped item's data
      console.log("Item dropped:", e);

         {/*process dropped item*/}

  };
2

Hi @akisaini,

I see your following my footstep in implementing file drag and drop in an extension :slight_smile:

Here is how I’ve done it:

    const handleAddFileToPipeline = useCallback(
      (location?: { x: number; y: number }) => {

        const fileBrowser = defaultFileBrowser;
        
        // Only add file if it is currently in focus
        if (shell.currentWidget?.id !== widgetId) {
          return;
        }
       ...

          Array.from(fileBrowser.selectedItems()).forEach((item: any) => {
            const filePath = item.path;
            ...
              };
          
           ...
    );

    const handleFileDrop = async (e: Drag.Event): Promise<void> => {
      handleAddFileToPipeline({ x: e.offsetX, y: e.offsetY });
    };

Find code on Github here.

Which is definitely inspired by how it’s done in the Elyra project (thanks to them), see file here.

1 Like