Electron-vue: How use File Object

[hoythan]

How get File Object ?
https://electron.atom.io/docs/api/file-object/

• Node version:8.4.0
• NPM version:5.3.0

[hoythan]

            const holder = document.getElementById('holder')
            holder.ondragover = () => {
                return false;
            }
            holder.ondragleave = holder.ondragend = () => {
                return false;
            }
            holder.ondrop = (e) => {
                e.preventDefault()
                for (let f of e.dataTransfer.files) {
                    console.log('File(s) you dragged here: ', f.path)
                }
                return false;
            }

console

Error in created hook: "TypeError: Cannot set property 'ondragover' of null"

[hoythan]

i drag file to input element , it open the save window?

[hoythan]

I used the method to bind events on the window to resolve it

            window.ondragover = function(e) {
                return false
            };

            window.ondrop = function(e) {
                e.preventDefault();
                for (var i = 0; i < e.dataTransfer.files.length; ++i) {
                    console.log(e.dataTransfer.files[i].path);
                }
                return false;
            };

            window.ondragleave = function () {
                return false;
            };

[hoythan]

error log

Property or method "onDrop" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[SimulatedGREG]

@hoythan

This is more of a question and not a direct issue with electron-vue. But to help a little, here is an example of how I previously handled getting files using drag-and-drop.

https://github.com/SimulatedGREG/asar-explorer/blob/master/src/renderer/components/Open.vue

[hoythan]

Thank you very much