ドラッグ＆ドロップされたファイルのパスを取得する
レンダラープロセス (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 プロパティが存在しています。