Electronでファイルのドラッグ＆ドロップを実装する

デスクトップアプリでファイルを扱うときは、たいていの場合にドラッグ＆ドロップでファイルを指定できるUIがあります。

Electronアプリに対して、クイックスタートの素のアプリの状態で、ファイルをドラッグ＆ドロップすると、アプリのHTML部分が通常のブラウザと同様にただのファイルビューワーとしての表示に変わってしまいます。

Electronの動作を知らないひとが使ったときに戸惑いのもとになりますので、ドラッグ&ドロップでファイルが差し替わらないようにすると良いでしょう。

ドラッグ&ドロップの動作を阻止する

• index.html ( もしくは外部jsでも可 )

  <script>
    /** documentにドラッグされた場合 / ドロップされた場合 */
    document.ondragover = document.ondrop = function(e) {
      e.preventDefault(); // イベントの伝搬を止めて、アプリケーションのHTMLとファイルが差し替わらないようにする
      return false;
    };
  </script>

documentに対してのドラッグとドロップ処理がキャンセルされました。

ファイルをドラッグ&ドロップしたときに認識する

• index.html

  <div id="holder">
    ここにドラッグ&ドロップできる
  </div>

  <script>
    var holder = document.getElementById('holder');
    /** hoverエリアにドラッグされた場合 */
    holder.ondragover = function () {
      return false;
    };
    /** hoverエリアから外れた or ドラッグが終了した */
    holder.ondragleave = holder.ondragend = function () {
      return false;
    };
    /** hoverエリアにドロップされた */
    holder.ondrop = function (e) {
      e.preventDefault(); // イベントの伝搬を止めて、アプリケーションのHTMLとファイルが差し替わらないようにする

      var file = e.dataTransfer.files[0];
      holder.innerText = file.name;
      console.log(file.path);

      return false;
    };
  </script>

まとめ

HTML5でファイルのドラッグ&ドロップUIを実装するときと同じコードで行けました。簡単でしたね。

参考

Electron本体 ( electronコマンドに引数を渡さずに叩いた時に出るUI ) のメニューから[View]⇢[Toggle Developer Tools]で出てくるソースコード

※こんなところにいい参考アプリがあると気が付かず「HTML5 ドラッグ ドロップ ファイル」でググり、electronコマンドで実行しようとしたところで気が付きました。本家のやり方を参考にするのが一番ですね。