Chrome drag drop file/folder not working

1
votes

I am trying to create PoC for Drag and drop a folder onto Chrome (v46) with the below code but alert is not getting triggered. Chrome switches to the folder browser view when a folder is dropped or opens the dragged file as it is dropped. Basically it keeps the default behavior. I tried to open the html file like "http://localhost/index.html" and "file:///C:\index.html" but both behave the same.

Where am I going wrong?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Drop File/Folder</title>
</head>
<body>
    <div id="dropzone" style="border: solid 1px; padding: 200px;">Drop files or folders here</div>

    <script type="text/javascript">
        var dropzone = document.getElementById('dropzone');

        dropzone.ondrop = function (e) {
            alert("dropped!");
            e.preventDefault();
        };

        // I also tried this but no success
        //dropzone.addEventListener('drop', function (e) {
        //    alert("dropped!");
        //    e.preventDefault();
        //});
    </script>
</body>
</html>
1
javascriptgoogle-chromedrag-and-drop

1 Answers

4
votes

It turns out you need to add a dragover handler.

dropzone.ondragover = function (e) {
    e.preventDefault();
};