Dragging Folders from File System into VS Code PWA

[Offroaders123]

With the standard Electron version of VS Code, the user is able to drag folders into the workspace from the File System, and it will open that folder in the current window.

I tried using this feature while editing my projects with the PWA version of VS Code at https://vscode.dev, however the folder did not open in the Workspace, as it does with the Electron version. I was using the VS Code PWA on Chrome OS with Chrome 97 installed.

In browsers that support the File System Access API, element drop events have the ability to return FileSystemDirectoryHandle objects after using the getAsFileSystemHandle() method on any DataTransferItem entries present on the event, if the user is dragging a folder. This would allow the user to drop a folder into the Workspace, and using the DataTransferItem entry to open that folder with the Workspace.

This would be a very helpful feature to also have with the PWA version, it provides another way that the user can open folders from the file system, alongside the currently available "Open Folder" button in the Explorer menu.

Great work on the progress of the PWA by the way, it is working awesome so far!

Here's a reference to the information I found about the DataTransferItem.getAsFileSystemHandle() feature I mentioned above: https://web.dev/file-system-access/#drag-and-drop-integration

[JacksonKearl]

fyi @bpasero

[Offroaders123]

I have done some of my own testing since this bug, and I stumbled on another issue since my original comment, not having to do with https://vscode.dev's implementation.

I found the issue on Chrome OS, and I think there may an additional implementation issue in terms of the browser itself.

I was going to try an implement a feature like VS Code's Explorer myself, so I can learn more about how it works, and I found out any time you have a directory as a selected item in your drag selection, it will prevent any FileSystemHandle objects from appearing inside of event.dataTransfer.items.

I will be testing my original issue comment above on other operating systems to see if the issue is still present, or if the whole problem was caused by Chrome OS's implementation issue.

I will do more testing for this new find, and if further results have the same outcome, I will submit a Chrome OS-specific issue report as well.

*Edit: For the image below, first I dragged a standard .html file into the document, to activate the event listener, and it showed the information about the file in the console as expected. I then did the same thing after that, but dragging in a directory instead. You can see that the drop event is still fired, but no items were present inside of event.dataTransfer.items to iterate over.

If you have a Chrome OS device and you'd like to see this issue also, my test code was using the snippet provided by the web.dev team in the File System Access API article, under the Drag and Drop Integration section.

<script>
  /* Based on the snippet from https://web.dev/file-system-access/#drag-and-drop-integration */
  document.addEventListener('dragover',e => e.preventDefault());

  document.addEventListener('drop', async (e) => {
    e.preventDefault();
    console.log("Item dropped!");

    const fileHandlesPromises = [...e.dataTransfer.items]
      .filter((item) => item.kind === 'file')
      .map((item) => item.getAsFileSystemHandle());

    for await (const handle of fileHandlesPromises) {
      if (handle.kind === 'directory') {
        console.log(`Directory: ${handle.name}`);
      } else {
        console.log(`File: ${handle.name}`);
      }
    }
  });

</script>

[Offroaders123]

Alright, did some testing with my own code snippet from the last comment on Windows, and everything is behaving as expected in terms of browser implementation.

The original feature request for https://vscode.dev is still accurate as well, it looks like the dropping directories into the app isn't supported in the browser as of now, regardless of platform implementation issues, like the one on Chrome OS.

Summary:

• Original feature proposal still stands for https://vscode.dev
• I happened to find an implementation issue in Chrome OS that would have affected this feature suggestion from working correctly, had it been part of the PWA at the time of my initial findings.

[tomayac]

(Filed the Chrome OS bug as https://crbug.com/1295210.)

[bpasero]

Pushed a couple of changes that adds FileSystemHandle support to our drop handlers where the browser supports it.

This already enables a few interesting scenarios:

• dropping files to editor area for opening as real local file editors
• dropping a folder to the editor area for opening as workspace
• dropping a file or folder into a local workspace to copy the contents over

I need to test this a bit more around handling N folders being dropped and supporting to add a folder to the workspace when dropped over the explorer, not sure yet why I am not getting asked whether I want to add the folder to the workspace or copy it into. We probably have some isWeb checks I need to clean up.

Also interesting how we can support this when a remote (such as GH) is opened. We can still support to open local files, but probably not folders.

[bpasero]

Did a complete test of all our drop sensitive locations and pushed some more changes.

• editor area
• editor tabs
• empty explorer
• open editors view

[Offroaders123]

Is there a time frame of when it may be likely to see this available in the stable https://vscode.dev @bpasero? Thanks for your work to have this implemented, it's a very helpful addition!

[bpasero]

@Offroaders123 here you go:

• https://vscode.dev/: first week of April
• https://insiders.vscode.dev/: end of this week

It is fine to stay on insiders, we in the team use it every day.