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.)