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: ""
}