How to know if the user is dropping the file on the defined location?

On this application, the user can drag and drop a file on the specified location. Let say here:

<div id="dropZone" style="width: 200px; height: 100px;"></div>

However, we noticed that no matter where the file is drop, the webpage will process it. Here is an example taken online https://jsfiddle.net/oL2akhtz/. There is a place to drop the file, but no matter where you leave it, it will stay. How to know if the user is droping the file in the right place? Or how do you disable the cursor if the user is not droping the file where it should be?