ElectronでデスクトップからD&Dでファイルを受け取る方法

FinderやエクスプローラなどからElectronアプリケーションにファイルをドラッグ&ドロップする操作を実現する方法について説明する。
すごく簡単。

まず以下のようにデフォルトの挙動をキャンセルする。

document.ondragover = document.ondrop = function (e) {
  e.preventDefault()
}

次に任意のDOMにdropイベントリスナを登録する。

document.body.addEventListener('drop', function (e) {
  console.log('file dropped:', e.dataTransfer.files[0]);
});

以下のようなFileオブジェクトが取得できる。

{
  lastModified: 1472114272000
  lastModifiedDate: Thu Aug 25 2016 17:37:52 GMT+0900 (JST),
  name: "07-recovering-your-password_linux01.png",
  path: "/Users/.../07-recovering-your-password_linux01.png",
  size: 103790,
  type: "image/png",
  webkitRelativePath: ""
}

投稿者:

Takuya

Digital crafts(man|dog). Love photography. Always making otherwise sleeping. born in 1984.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中