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

by

通常のWebアプリはWebブラウザのセキュリティポリシーの関係上、クライアントPC上のファイルのファイル名は取得できてもフルパスが取得できないことが多い、というか今日日よほど古いブラウザでない限りできないはず。

一方、クライアントPC上でネイティブアプリとして動作することを想定して開発するElectronアプリでは、Electronが提供する機能を使ってフルパスが取得できる。

今回はその取得方法のお話。

実装方法

HTML

ユーザーがファイルを選択するための要素として、input要素を書く、だけ。

例えばこんな感じ。

<input type="file" id="my-input" />

JavaScript

Electron環境では、Fileオブジェクトに対して魔法のキーワード「path」が使える。

この「path」にファイルのフルパスが入っている。

これ、普通のWebアプリで使うと「undefined」となってしまうので、「path」は必ずElectron環境上でデバッグすること。

コードは例えばこんな感じになる。

function OnInput(e) {
  // "path"は、Electron環境でのみ有効。通常のWebクライアントにおける評価値は "undefined" となるので、デバッグ時はちょっと注意。
  const filePath = document.getElementById("my-input").files[0].path;

  // ユーザーが選択したファイルのフルパスが表示される。
  console.log(filePath);
}

// HTMLで作成したinput要素
const myInput = document.getElementById("my-input");
// input要素のoninputイベントにイベントハンドラ（↑で作成したメソッド）を登録する。
myInput.oninput = OnInput;

動作確認

Electronアプリをデバッグモードで起動したら、input要素をクリックしてPC内のファイルをなんでも良いので選択しよう。

選択したファイルのフルパスがデバッグコンソール上に表示されると思う。

Post Views: 8,913

コメントする