Chapter 03無料公開

ファイルのドラッグ&ドロップ (File Object)

Kei Touge
Kei Touge
2021.09.18に更新

https://www.electronjs.org/docs/api/file-object

ドラッグ&ドロップされたファイルのパスを取得する

レンダラープロセス (HTML)

index.html
  <body>
    <div class="container" id="container">
      <ol id="list"></ol>
    </div>

    <!-- You can also require other files to run in this process -->
    <script src="app.js"></script>
  </body>

レンダラープロセス (CSS)

styles.css
html,
body,
.container {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  display: flex;
}

レンダラープロセス (JavaScript)

app.js
const container = document.getElementById('container');
const list = document.getElementById('list');

/**
 *
 * 'dragover', 'drop' 双方のイベントで
 * e.preventDefaut() と e.stopPropagation() が必要
 *
 */
const preventDefault = (e) => {
  e.preventDefault();
  e.stopPropagation();
};

container.addEventListener('dragover', (e) => {
  preventDefault(e);
});

container.addEventListener('drop', (e) => {
  preventDefault(e);

  for (const file of e.dataTransfer.files) {
    const child = document.createElement('li');

    child.textContent = file.path;
    list.appendChild(child);
  }
});

nodeIntegration: false が設定されていても、レンダラープロセスで File オブジェクトに path プロパティが存在しています。