Fix drag n drop file loading

renderer/player/elements/header/index.js

@@ -1,4 +1,5 @@
 const remote = require('@electron/remote')
+const { webUtils } = require('electron')
 const { app, dialog } = remote
 const html = require('choo/html')
 const Component = require('nanocomponent')
@@ -36,7 +37,7 @@ const styles = css`
 `
 
 class Header extends Component {
-  constructor (opts) {
+  constructor(opts) {
     super(opts)
 
     this.emit = null
@@ -52,12 +53,12 @@ class Header extends Component {
     this.searchComp = new Search()
   }
 
-  handleSearch (val) {
+  handleSearch(val) {
     this.search = val
     this.emit('library:search', val)
   }
 
-  handleAddButton () {
+  handleAddButton() {
     if (!this.dialogOpen) {
       this.dialogOpen = true
       const paths = config.get('paths')
@@ -74,26 +75,27 @@ class Header extends Component {
     }
   }
 
-  handlePaths ({ filePaths }) {
+  handlePaths({ filePaths }) {
     this.dialogOpen = false
     if (Array.isArray(filePaths) && filePaths.length > 0) {
       this.emit('config:set', { filePaths })
       this.emit('library:update-library', filePaths)
     }
   }
 
-  handleNav () {
+  handleNav() {
     this.emit('pushState', '#preferences')
   }
 
-  handleDrop (event) {
+  handleDrop(event) {
     event.preventDefault()
     const { files } = event.dataTransfer
-    const paths = Array(files.length).fill(0).map((_, i) => files.item(i).path)
+
+    const paths = Array(files.length).fill(0).map((_, i) => webUtils.getPathForFile(files.item(i)))
     this.handlePaths({ filePaths: paths })
   }
 
-  createElement (state, emit) {
+  createElement(state, emit) {
     this.emit = emit
     this.search = state.library.search
     this.loading = state.library.loading
@@ -106,22 +108,22 @@ class Header extends Component {
       <header class="${styles.toolbar}">
         <div class="${styles.toolbarLeft}">
           ${this.searchComp.render({ /* eslint-disable indent */
-            onchange: this.handleSearch,
-            value: this.search
-          })/* eslint-enable indent */}
+      onchange: this.handleSearch,
+      value: this.search
+    })/* eslint-enable indent */}
         </div>
         <div class="${styles.toolbarRight}">
           ${button({ /* eslint-disable indent */
-            className: this.loading ? styles.spin : null,
-            onclick: this.handleAddButton,
-            iconName: this.loading ? 'entypo-cog' : 'entypo-folder-music'
-          })/* eslint-enable indent */}
+      className: this.loading ? styles.spin : null,
+      onclick: this.handleAddButton,
+      iconName: this.loading ? 'entypo-cog' : 'entypo-folder-music'
+    })/* eslint-enable indent */}
         </div>
       </header>
     `
   }
 
-  update (state, emit) {
+  update(state, emit) {
     if (this.search !== state.library.search) return true
     if (this.loading !== state.library.loading) return true
     return false