How to bind theia “FileDialogService” to React button onclick event

#1

Hi, I’m new to theia, I want to create a button for open file,but get it “this.FileDialogService is undefined”, this is my code, how can I solve it?

import { FileDialogService } from '@theia/filesystem/lib/browser/file-dialog/file-dialog-service';

@injectable()
export class CustomDialog extends ReactDialog<CreateAPProject> {
    @inject(FileDialogService) fileDialogService: FileDialogService;
}

    protected async onClick(): Promise<void> {
    
      const uri = await this.fileDialogService.showOpenDialog({
          title: 'select File',
          canSelectFiles: false,
          canSelectFolders: true,
          openLabel: 'select',
      });

      console.log('select', uri);
    }
    return <div>
<button onClick={() => this.onClick()} >Import</button>
<div>
#2

@Kevin thank you for the discussion, it is a little difficult to help with only a subset of the code, but I pushed an example on GitHub if you’d like to take a look (GitHub - vince-fugnitto/custom-dialog).

You can use the command hello world dialog to test the changes (confirmed that the button renders and it triggers the file-dialog).

1 Like
#3

You are the sweetest，thank you very much,this solved my problem