Loading files from a local system

Now that you have got the Open File functionality and registered the global keyboard shortcut for it, let's see what it takes to load a file from the local filesystem back into the editor component:

1. Let's start by updating the menu.js file and registering a second global shortcut for Cmd + O or Ctrl + O, depending on the user's desktop platform:

      globalShortcut.register('CommandOrControl+O', () => {
          // show open dialog
      });

We have already imported the dialog object from the Electron framework. You can use it to invoke the system's Open dialog as well.

1. Update the menu.js file according to the following code:

      globalShortcut.register('CommandOrControl+O', () => {
          const window = BrowserWindow.getFocusedWindow();

          const options = {
            title: 'Pick a markdown file',
            filters: [
              { name: 'Markdown files', extensions: ['md'] },
              { name: 'Text files', extensions: ['txt'] }
            ]
          };

          dialog.showOpenDialog(window, options);
        });

Note that, this time, we are providing more than one file filter. This allows users to open multiple file formats in a grouped fashion. For the sake of simplicity, we are allowing our users to open markdown and plain text files.

1. Run the application and press Cmd + O or Ctrl + O, depending on the platform you are using for development. Note that the system dialog appears and allows us to select markdown files by default:

1. You can also switch to the Text files group by means of the native Open dialog:

1. Now, let's get back to the menu.js file. Similar to the Save dialog, the Open dialog supports a callback function that provides us with information about selected files. The user can also close the dialog without picking anything, so you should always validate the results.
2. Given the nature of our editor application, we are only providing support for editing one file at a time. That 's why you only need to pick the first file if the user performs multi-selection, as follows:

      dialog.showOpenDialog(window, options, paths => {
        if (paths && paths.length > 0) {
          // read file and send to the renderer process
        }
      });

1. Finally, we use the fs object that we imported from Node.js earlier to support the Save dialog. This time, however, we are looking for the fs.readFileSync method.
2. As soon as we've read the file, we need to emit the cross-process event via the load channel so that the rendering process can listen and perform additional actions.
3. Update the dialog.showOpenDialog call so that it looks as follows:

      dialog.showOpenDialog(window, options, paths => {
        if (paths && paths.length > 0) {
          const content = fs.readFileSync(paths[0]).toString();
          window.webContents.send('load', content);
        }
      });

1. Before we move on to the rendering side, please ensure that the implementation of your new global shortcut looks as follows:

        globalShortcut.register('CommandOrControl+O', () => {
          const window = BrowserWindow.getFocusedWindow();
          const options = {
            title: 'Pick a markdown file',
            filters: [
              { name: 'Markdown files', extensions: ['md'] },
              { name: 'Text files', extensions: ['txt'] }
            ]
          };
          dialog.showOpenDialog(window, options, paths => {
            if (paths && paths.length > 0) {
              const content = fs.readFileSync(paths[0]).toString();
              window.webContents.send('load', content);
            }
          });
        });

1. Open the index.html file for editing and scroll to the scripts section, where we already have some process communication handling in place.
2. Add a new handler that listens to the load channel and the corresponding messages coming from the renderer process:

      ipcRenderer.on('load', (event, content) => {
        if (content) {
          // do something with content
        }
      });

1. As you can see, we're validating the input to ensure that the text content is indeed there and using the editor.value(<text>) method to replace the markdown editor content with new text:

      ipcRenderer.on('load', (event, content) => {
        if (content) {
          editor.value(content);
        }
      });

1. This is all we need to implement for the Open File feature. Run or restart your Electron application, press Cmd + O or Ctrl + O, and select a markdown file:

You should now see the content of the file on the screen. As soon as we call the value() function, the SimpleMDE component will reformat everything according to the markdown rules.