Get File Path From Drop Event

Question

I have some javascript code that allows users to drag and drop files in IE.

The problem I have is that they would like the file deleted after being dragged, but I can't seem to get the file path, just the name.

I have seen many references to e.dataTransfer.files[0].path, but it always comes back as 'undefined' when I try it.

Any ideas why e.dataTransfer.files[0].path does not work, or how I can get the file path?

 $(document).ready(function (ex) {
        var holder = document.getElementById('holder');
        holder.ondragover = function () { this.className = 'hover'; return false; };
        holder.ondrop = function (e) {
            e.preventDefault();
            var file = e.dataTransfer.files[0];
            var path = e.dataTransfer.files[0].path;
            fileArray.push(file);
            //alert(e.target.id);
            var reader = new FileReader();
            reader.readAsDataURL(file);
        };
    });

Answer 1

that's not possible for a web app, but if your users would run an app on their machine, you could build an electron app. inside electron you get the e.dataTransfer.files[0].path property, which you can then use to delete the file.

https://www.electronjs.org/

Answer 2

The file doesn't have property path.

You can experiment with it here and the complete list of file properties can be found here.

To read the file one uses FileReader as you did, without using the path explicitly.