HTML5 drop event doesn't work unless dragover is handled

I am listening to the drop event and doing e.preventDefault() But its trying to open the dropped file. It was working fine till yesterday. But just today It broke for some unknown reason. I made a JsFiddle#bwquR/10 to reflect the Same.

Edit:

It looks like if you don't take the dragover event drop cannot be handled. even in the the fiddle If you comment the dragover It will not work.
In the actual work I missed the spelling of dragover But its still a question drop will not work without dragover

The fiddle was actually working but s the body was so small (only text DROP there). It was taking drop event only on that small area where DROP text lies not on the entire body. So I thought It was not working. Sorry for the confusion.

I guess it is because that without dragOver event handler, default event handler of dragOver event is used, thus, no drop event is triggered after that. There is a need with e.preventDefault for dragOver event before drop event.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

If you want to allow a drop, you must prevent the default handling by cancelling the event. You can do this either by returning false from an attribute-defined event listener, or by calling the event's event.preventDefault method. The latter may be more feasible in a function defined in a separate script.

<div ondragover="return false">
<div ondragover="event.preventDefault()">

Calling the preventDefault method during both a dragenter and dragover event will indicate that a drop is allowed at that location. However, you will commonly wish to call the preventDefault method only in certain situations, for example, only if a link is being dragged. To do this, call a function which checks a condition and only cancels the event when the condition is met. If the condition is not met, don't cancel the event, and a drop will not occur there if the user releases the mouse button.

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);

I'm not sure if I understand your problem correctly but if you want to read dropped files you need to handle dragover event and put there at least this line of code:

evt.dataTransfer.dropEffect = 'copy';

otherwise dropEffect is null by default and you won't get any data.

Works fine for me. Are you loading this as an HTTP or a FILE URL? I believe it needs to be an HTTP URL with Chrome.