Electron でユーザーが選択したファイルのフルパスを取得する

背景

<input type=“file” /> でユーザーが選択したファイルのパスを取得して、メインプロセスに渡したかった。

方法

webUtils.getPathForFile を使用する

Electron 環境では File Object にフルパスを取得できる path 属性がありましたが、これは deprecated になっています。

Warning The path property that Electron adds to the File interface is deprecated and will be removed in a future Electron release. We recommend you use webUtils.getPathForFile instead.

Electron 29.0.0 以降では webUtils.getPathForFile を使うことが推奨されています。

app.tsx

function App(): JSX.Element {
  const [path, setPath] = useState('')

  function handleOnChange(event: React.ChangeEvent<HTMLInputElement>): void {
    const file = event.target.files?.[0]

    if (file) {
      setPath(window.webUtils.getPathForFile(file))
    }
  }

  return (
    <div>
      <input type="file" onChange={handleOnChange} />
      <p>{path}</p>
    </div>
  )
}

webUtils を preload で renderer に公開。

preload/index.ts


import { contextBridge } from 'electron'
import { webUtils } from 'electron'

const api = {}
if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld('api', api)
    contextBridge.exposeInMainWorld('webUtils', webUtils)
  } catch (error) {
    console.error(error)
  }
}

背景

方法

webUtils.getPathForFile を使用する

コメント