2016-05-20 09:25:10 -07:00
|
|
|
# `File` Object
|
2014-10-25 14:58:32 +08:00
|
|
|
|
2016-04-21 15:39:12 -07:00
|
|
|
> Use the HTML5 `File` API to work natively with files on the filesystem.
|
2016-04-21 15:35:29 -07:00
|
|
|
|
2015-08-26 16:41:25 -07:00
|
|
|
The DOM's File interface provides abstraction around native files in order to
|
2015-08-25 05:48:24 -07:00
|
|
|
let users work on native files directly with the HTML5 file API. Electron has
|
2015-08-26 16:41:25 -07:00
|
|
|
added a `path` attribute to the `File` interface which exposes the file's real
|
|
|
|
path on filesystem.
|
2014-10-25 14:58:32 +08:00
|
|
|
|
2016-11-03 10:26:00 -07:00
|
|
|
Example of getting a real path from a dragged-onto-the-app file:
|
2014-10-25 14:58:32 +08:00
|
|
|
|
|
|
|
```html
|
|
|
|
<div id="holder">
|
|
|
|
Drag your file here
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
2018-12-05 09:14:52 -03:00
|
|
|
document.addEventListener('drop', (e) => {
|
2017-07-11 15:44:08 +09:00
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
2018-12-05 09:14:52 -03:00
|
|
|
|
|
|
|
for (const f of e.dataTransfer.files) {
|
2016-07-25 18:39:25 -07:00
|
|
|
console.log('File(s) you dragged here: ', f.path)
|
2016-07-19 23:51:58 -05:00
|
|
|
}
|
2017-07-11 15:44:08 +09:00
|
|
|
});
|
2018-12-05 09:14:52 -03:00
|
|
|
document.addEventListener('dragover', (e) => {
|
2017-07-11 15:44:08 +09:00
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
});
|
2014-10-25 14:58:32 +08:00
|
|
|
</script>
|
|
|
|
```
|