概要

window.showOpenFilePickerを使用することでファイル選択ダイアログを表示できます。
これによってinputタグを使わないでファイル選択ボタンを作ることができます。

サンプル

例として以下のHTMLを用意します。
ボタンを押すとダイアログが開いて、選択した画像が表示されるようにします。

<button>ファイルを選択</button>
<img />

ボタンをクリックしたときにshowOpenFilePickerでファイル選択のダイアログを開くようにします。
引数にMIMEタイプと拡張子を与えて、特定のファイルのみ選択できるようにしています。

const button = document.querySelector('button')
const img = document.querySelector('img')

button.addEventListener('click', async() => {
  try {
    const [handle] = await window.showOpenFilePicker({
      types: [
        {
          accept: {
            'iamges/*': [
              '.jpg',
              '.jpeg',
              '.png',
              '.gif',
              '.svg'
            ]
          }
        }
      ]
    })
    const file = await handle.getFile()
    img.src = URL.createObjectURL(file)
  } catch (err) {
    console.error(err.name, err.message)
  }
})