2016-01-17 16:00:28 +00:00
|
|
|
# `File` object
|
|
|
|
|
2016-05-30 04:45:48 +00:00
|
|
|
> ファイルシステム上のファイルを扱うには、HTML5のFile APIを使用します。
|
|
|
|
|
2016-01-17 16:00:28 +00:00
|
|
|
DOMのファイルインターフェイスにより、ユーザーはHTML 5 ファイルAPIで直接、ネイティブファイルで作業できるように、ネイティブファイル周りの抽象化を提供します。Electronは、ファイルシステム上のファイルの実際のパスを公開する`File`インターフェイスの`path`属性を追加します。
|
|
|
|
|
|
|
|
アプリ上にドラッグしたファイルの実際のパスを取得する例:
|
|
|
|
|
|
|
|
```html
|
|
|
|
<div id="holder">
|
|
|
|
Drag your file here
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
2016-05-30 04:45:48 +00:00
|
|
|
const holder = document.getElementById('holder');
|
|
|
|
holder.ondragover = () => {
|
2016-01-17 16:00:28 +00:00
|
|
|
return false;
|
|
|
|
};
|
2016-05-30 04:45:48 +00:00
|
|
|
holder.ondragleave = holder.ondragend = () => {
|
2016-01-17 16:00:28 +00:00
|
|
|
return false;
|
|
|
|
};
|
2016-05-30 04:45:48 +00:00
|
|
|
holder.ondrop = (e) => {
|
2016-01-17 16:00:28 +00:00
|
|
|
e.preventDefault();
|
2016-05-30 04:45:48 +00:00
|
|
|
const file = e.dataTransfer.files[0];
|
2016-01-17 16:00:28 +00:00
|
|
|
console.log('File you dragged here is', file.path);
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
```
|