[QUESTION] How to use File System Access API with IDE?

[CaptainNeo2023]

We would like to access local file system but node.js server is deployed into remote computer like web cloud service whereas the client browser runs in our local computer PC, so question is how to extend IDE to be able to access local file system for example using File System Access API, and if OpenSumi may provide that feature in case that server and client not on same computer to access local file system for IDE?

[erha19]

@CaptainNeo2023 you can use IFileServiceClient, like:

import { IFileServiceClient } from '@opensumi/ide-file-service';
...

@Autowired(IFileServiceClient)
protected readonly fileServiceClient: IFileServiceClient;
...

[CaptainNeo2023]

@CaptainNeo2023 you can use IFileServiceClient, like:

import { IFileServiceClient } from '@opensumi/ide-file-service';
...

@Autowired(IFileServiceClient)
protected readonly fileServiceClient: IFileServiceClient;
...

The browser source code uses file-system-access function call showDirectoryPicker to let user to select folder in the local file system to be opened in IDE window.

Below sample code illustrates where the workspace should be opened in the window but we would like to know how to use IFileServiceClient to fetch folders and files from the file system where user has selected folder to be opened on IDE by the browser whereas node.js server run on remote computer, and instead of using this.window.showOpenDialog function call the command uses showDirectoryPicker function from File System Access API to be able to use browser in different computer than node.js server is located.

import { showDirectoryPicker } from 'file-system-access'

export const createWorkspaceStructure= async () => {
   
    const explore = async (dirHandle, path = dirHandle.name) => {

     //  parse folders and files and return the workspace structure**

   };
  
        const handle = await showDirectoryPicker({});

        // call explore function to parse folders and files and return worksspace structure** 
};

export class CoreCommandContribution implements CommandContribution {

registerCommands(commands: CommandRegistry) {
       // ...
        commands.registerCommand(FILE_COMMANDS.OPEN_FOLDER, {

          execute: async () => {
            
                const newWorkspace = await createWorkspaceStructure();

               // open workspace dialog in the window

              /*
               const newWorkspace = await this.window.showOpenDialog({
                  canSelectFolders: true,
                  canSelectMany: false,
               });
               
                if (newWorkspace) {
                    if (this.workspace.workspace?.uri.toString() === newWorkspace[0].toString()) {
                       return;
                    }
                    window.open(`${window.location.protocol}//${window.location.host}?workspaceDir=${newWorkspace[0].codeUri.fsPath.toString()}`);
                }
              */
          }
    })

The question is still how to show folders and files in IDE window if using IFileServiceClient to create workspace folders and files from the local file system?

[erha19]

@CaptainNeo2023 If you want to create a file picker, you can use IWindowDialogService to get a service with 2 methods, showOpenDialog and showSaveDialog, the options is the same as https://code.visualstudio.com/api/references/vscode-api#SaveDialogOptions

[CaptainNeo2023]

@CaptainNeo2023 If you want to create a file picker, you can use IWindowDialogService to get a service with 2 methods, showOpenDialog and showSaveDialog, the options is the same as https://code.visualstudio.com/api/references/vscode-api#SaveDialogOptions

But the server isn't same computer, only browser is in this computer where to create workspace, only File System Access API may access to the local file system where browser is run, the IDE run on remote computer where browser URL is located, but we don't want to use file system on remote computer, only access file system on same computer where browser requests client code, therefore we can't use this part of code anylonger, only showDirectoryPicker function is allowed to access the local file system

THIS FUNCTION CAN'T ACCESS TO LOCAL FILE SYSTEM WHICH IS NOT SAME THAN SERVER FILE SYSTEM

this.window.showOpenDialog({

[erha19]

@CaptainNeo2023 Maybe you are finding a resolution like pure browser IDE ? see the sample https://github.com/opensumi/ide-startup-lite, you can also use File System Access API in it.

[CaptainNeo2023]

The showOpenDialog lets user to select folder from the Node.js file system.

The showDirectoryPicker() method shows a directory picker that lets the user select a single directory, returning File System Access handle for the selected directory.

The question is still how to create workspace folders and files from the local file system located on user browser?

[erha19]

@CaptainNeo2023 maybe you should do it by yourself, there is no default implementation within the framework and I have no further suggestions.