Interface IFilePicker

2

import {BaseModule, Context, IFilePicker, ModuleScreen, ModuleScreenProps, System, ModuleContext, logger} from 'dart-api';
import React from 'react';
import { Button } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';

// IIFE for register a function to create an instance of main class which is inherited BaseModule.
(() => {
 System.registerModuleMainClassCreator(
   (packageInfo) => new Module(packageInfo),
 );
})();

class Module extends BaseModule {
 getModuleScreen(componentId: string) {
   if (componentId === 'MainScreen') {
     return MainScreen;
   }
   return null;
 }
}

class MainScreen extends ModuleScreen {
 constructor(props: ModuleScreenProps) {
   super(props);
 }

 render() {
   return (
     <ThemeProvider theme={this.systemTheme}>
       <App moduleContext={this.moduleContext} />
     </ThemeProvider>
   );
 }
}

interface IAppProps {
 moduleContext: ModuleContext;
}

function App(props: IAppProps) {
 const moduleContext = props.moduleContext;
 const filePicker = moduleContext.getSystemLibrary(
   Context.FILE_PICKER,
 ) as IFilePicker;

 // open file picker
 const handleOnClick = async () => {
   const directoryPickResult = await filePicker.showDirectoryPicker();
   const directoryHandler = directoryPickResult.handler;
   if (!directoryHandler) {
     return;
   }

   directoryHandler.getEntries().then((entries) => {
     if (entries.entries) {
       for (const file of entries.entries) {
         logger.info(file.name);
         // TODO: Add your code here
       }
     }
   });
 };

 return (
   <div
     style={{
       'width': '100%',
       'height': '100%',
       'position': 'relative',
     }}
     data-gjs-type="ContainerAbsolute"
   >
     <Button onClick={() => handleOnClick()}>showDirectoryPicker</Button>
   </div>
 );
}

2

import {BaseModule, Context, FilePickerOptions, IFilePicker, ModuleScreen, ModuleScreenProps, System, ModuleContext,} from 'dart-api';
import React from 'react';
import {Button} from '@mui/material';
import {ThemeProvider} from '@mui/material/styles';
import {useTranslation} from 'react-i18next';

// IIFE for register a function to create an instance of main class which is inherited BaseModule.
(() => {
   System.registerModuleMainClassCreator((packageInfo) => new Module(packageInfo));
})();

class Module extends BaseModule {
   getModuleScreen(componentId: string) {
       if (componentId === 'MainScreen') {
           return MainScreen;
       }
       return null;
   }
}

class MainScreen extends ModuleScreen {
   constructor(props: ModuleScreenProps) {
       super(props);
   }

   render() {
       return (
           <ThemeProvider theme={this.systemTheme}>
               <App moduleContext={this.moduleContext}/>
           </ThemeProvider>
       );
   }
}

interface IAppProps {
   moduleContext: ModuleContext;
}

function App(props: IAppProps) {
   const moduleContext = props.moduleContext;
   const {t} = useTranslation();
   const filePicker = moduleContext.getSystemLibrary(Context.FILE_PICKER) as IFilePicker;

   // open file picker
   const handleOnClick = async () => {
       // set file picker option
       const options: FilePickerOptions = {
           multiple: true,
           types: [
               {
                   mimeType: 'text/plain',
                   extensions: ['.txt'],
               },
           ]
       };
       const filePickResult = await filePicker.showFilePicker(options);
       const fileHandlers = filePickResult.handlers;
       if (!fileHandlers) {
           return;
       }

       // handle file picked using fileHandler
       for (const fileHandler of fileHandlers) {
           try {
               // read file from fileHandler
               fileHandler.read().then((result) => {
                   if (result.data) {
                       // TODO: Add your code here
                   }
               });
           } catch (e) {
               console.error(e);
           }
       }
   };

   return (
       <div
           style={{
               'width': '100%',
               'height': '100%',
               'position': 'relative',
           }}
           data-gjs-type="ContainerAbsolute"
       >
           <Button onClick={() => handleOnClick()}>showFilePicker</Button>
       </div>
   );
}

2

import {BaseModule, Context, FilePickerOptions, IFilePicker, ModuleScreen, ModuleScreenProps, System, ModuleContext,} from 'dart-api';
import React from 'react';
import {Button} from '@mui/material';
import {ThemeProvider} from '@mui/material/styles';
import {useTranslation} from 'react-i18next';
import {SaveFilePickerOptions} from "../libs/dart-api";

// IIFE for register a function to create an instance of main class which is inherited BaseModule.
(() => {
   System.registerModuleMainClassCreator((packageInfo) => new Module(packageInfo));
})();

class Module extends BaseModule {
   getModuleScreen(componentId: string) {
       if (componentId === 'MainScreen') {
           return MainScreen;
       }
       return null;
   }
}

class MainScreen extends ModuleScreen {
   constructor(props: ModuleScreenProps) {
       super(props);
   }

   render() {
       return (
           <ThemeProvider theme={this.systemTheme}>
               <App moduleContext={this.moduleContext}/>
           </ThemeProvider>
       );
   }
}

interface IAppProps {
   moduleContext: ModuleContext;
}

function App(props: IAppProps) {
   const moduleContext = props.moduleContext;
   const {t} = useTranslation();
   const filePicker = moduleContext.getSystemLibrary(Context.FILE_PICKER) as IFilePicker;

   // open file picker
   const handleOnClick = async () => {
       // set file picker option
       const options: SaveFilePickerOptions = {
           suggestedName: `test.txt`,
           types: [
               {
                   mimeType: 'text/plain',
                   extensions: [".txt"],
               },
           ],
       };
       const filePickResult = await this.filePicker.showSaveFilePicker(options);
       const fileHandler = filePickResult.handler;
       if (!fileHandler) {
           return;
       }

       const testFileString = "Hello, World!"
       const writeResult = await fileHandler.write(testFileString);
       if (writeResult) {
           // TODO: Add your code here
       }
   }

   return (
       <div
           style={{
               'width': '100%',
               'height': '100%',
               'position': 'relative',
           }}
           data-gjs-type="ContainerAbsolute"
       >
           <Button onClick={() => handleOnClick()}>showSaveFilePicker</Button>
       </div>
   );
}