Question

I am implementing a file processor in JS and HTML 5 and it is working as expected in Chome, but not in Firefox.

Here is the jsfiddle: http://jsfiddle.net/vapocalypse/G9QbX/

In Firefox, the drop event is forwarded to the browser, which opens the file, not being processed by my script. It behaves as if I dropped something over an empty tab.

What am I doing wrong? I have tried changing from jQuery to native DOM using getElementById and overriding the ondrop method, but same results…

Thanks,
Apoc

Answer 1

As far as I can tell, your basic problem is that you’re not cancelling the dragover event on the the element you’re trying to capture the drop event on. The drop event is ignored in this case. Here is the code I added:

$('#topDiv').bind("dragenter dragover", function(e) {
    e.preventDefault();
    return false;
});

I also removed the $(document).ready form your code and just set the jsFiddle to run all the JS onDomReady instead, but I don’t think that made much difference. Here’s the example.