Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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コマンドで実行しようとしたところで気が付きました。本家のやり方を参考にするのが一番ですね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした