file upload drag and drop issue

Question

I've following HTML

<div class="upload_file" id="dropArea">
    <form class="box row center" method="post" action="" enctype="multipart/form-data">
        <div class="box_input column center">
            <p class="title">BROWSE DATA FILE</p>
            <span class="icon-upload_file"></span>
            <input class="box_file" type="file" name="data" id="data" />
            <label for="data" class="column center">
                <p class="title">CHOOSE A FILE</p>
                <p class="subtitle">or drag and drop it</p>
            </label>
        </div>
    </form>
</div>

and associated javascript

let dropArea = document.getElementById('dropArea');

dropArea.addEventListener('dragover', function(event){
    console.log(event.type); // works
}, false)

dropArea.addEventListener('drop', function(event){
    event.preventDefault(); // opens the file in the browser
    event.stopPropagation();
}, true);

I'm receiving drag 'over' event for sure, but the problem is with preventDefault, if i drag and drop an image or file, it opens up in the browser. not sure what am I missing in here.

Thanks,

Answer 1

You just need event.preventDefault(); also in dragover function