This should be SOOOoooo simple and I can't figure it out. :-(

Electron ➙ Svelte ➙ User pushes button ➙ Dialog box opens‼️

I want to use Electron's dialog.showOpenDialog() because I need to specify many of the options that it facilitates … AND I was unable to locate matching options using Svelte's <input type="file" />.

In my .svelte component file I WANT This…

<script>
  const {ipcRenderer, dialog} = require('electron');
  const fs = require('fs');
  const path = require('path');

  function chooseSnapsFile () {
    const selectedSnapsFile = dialog.showOpenDialog({
      properties: ['openFile', 'dontAddToRecent'],
      defaultPath: `${path.join(__dirname, '../public/CapturedSnaps/')}`,
      buttonLabel: 'Open SNAP!',
      message: 'Choose the collection of snapshots you wish to replay:',
      filters: [
      { name: 'Snapshots', extensions: ['snaps'] },
      ]
    })
</script>

All I GET is This…

Tree.svelte:354 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'showOpenDialog')
    at chooseSnapsFile (Tree.svelte:354:30)
    at HTMLButtonElement.click_handler (Tree.svelte:379:9)

My HTML section is This…

<div id="buttonsAndTree">
  {#if collectionOfAllSnapshots.length}
    <div class="buttonContainer">
      <button
        on:click={() => {
          chooseSnapsFile();
        }}>Upload Snapshots</button
      >
      {#each collectionOfAllSnapshots as snapshot, idx}
        <button
          on:click={() => {
            activeIndex = idx;
            updateWindow(activeIndex);
          }}>Snapshot {idx + 1}</button
        >
      {/each}
    </div>
  {/if}
</div>

I have TRIED This…

<script>
  const {ipcRenderer, dialog} = require('electron');
  const fs = require('fs');
  const path = require('path');

  function chooseSnapsFile () {
    const selectedSnapsFile = dialog.showOpenDialog({
      properties: ['openFile', 'dontAddToRecent'],
      defaultPath: `${path.join(__dirname, '../public/CapturedSnaps/')}`,
      buttonLabel: 'Open SNAP!',
      message: 'Choose the collection of snapshots you wish to replay:',
      filters: [
      { name: 'Snapshots', extensions: ['snaps'] },
      ]
    })
</script>

AND THIS…

<script>
  const {ipcRenderer, dialog} = require('electron');
  const fs = require('fs');
  const path = require('path');

async function chooseSnapsFile2() {
  let { canceled, filePaths } = await dialog.showOpenDialog(this.window, {
    properties: ['openFile'],
    filters: [{ name: 'Snapshots', extensions: ['snaps'] }],
    message: 'Choose the collection of snapshots you wish to replay:',
    defaultPath: `${__dirname}/CapturedSnaps`,
  });
  if (canceled) {
    console.log(`\n`);
  }
  console.log(`\n`);

  console.log('file: Tree.svelte | line 369 | chooseSnapsFile | filePaths',
    filePaths
  );
}
</script>

AND THIS…

<script>
  const {ipcRenderer, dialog} = require('electron');
  const fs = require('fs');
  const path = require('path');

  async function chooseSnapsFile () {
    const selectedSnapsFile = await dialog.showOpenDialog({
      properties: ['openFile'],
      defaultPath: `${path.join(__dirname, '../public/CapturedSnaps/')}`,
      buttonLabel: 'Open SNAP!',
      message: 'Choose the collection of snapshots you wish to replay:',
      filters: [
      { name: 'Snapshots', extensions: ['snaps'] },
      ]
    })
</script>

AND THIS…

<script>
  const {ipcRenderer, dialog} = require('electron');
  const fs = require('fs');
  const path = require('path');

  async function chooseSnapsFile() {
    const files = await dialog.showOpenDialog({
      properties: ['openFile'],
    });
    return files;
  }
</script>

Please … Can anyone help me achieve my goal of a fully specified open file dialog box being "Callable" from a button click in a .svelte component⁉️