File Drag & Drop in Firefox (v10)

Question

I'm trying to get file drag and drop in firefox and am taking baby steps to start. Right now, I'm just trying to drag some files in to a dropzone and get a list of the files dropped. At this point, I don't want to do anything with the files yet.

When I drag a file (in this case an image, but the same thing happens regardless of the file type) from finder to the dropzone, I can see the dragenter and dragexit events firing. When I drop the file in to the dropzone, the drop event is not firing. What happens instead is that the browser opens the image on it's own (e.g, the address is showing file://path/to/my/image.png).

My javascript looks like this:

  dropbox = document.getElementById("standard_file_dropzone");

  dropbox.addEventListener("dragenter", function(){console.log('standard enter');}, false);
  dropbox.addEventListener("dragexit", function(){console.log('standard exit');}, false);
  dropbox.addEventListener("dragover", $.noop, false);
  dropbox.addEventListener("drop", function ( event ) {
                                     console.log('standard dropped');
                                     event.stopPropagation();
                                     event.preventDefault();

                                     if(( typeof event.dataTransfer.files !== 'undefined' ) &&
                                        ( event.dataTransfer.files.length > 0 )) {
                                       console.dir( event.dataTransfer.files );

                                     }
                                     return false;
                                   }, false);

My HTML looks like this:

    <div id="standard_file_dropzone" style="height:150px; width:150px; border:solid;">
      Standard Drop Files Here
    </div>

So I'm wondering what I'm doing wrong here? There doesn't seem to be anything (at least obvious to me) wrong with the above code. The dragenter/exit events are firing, why isn't the drop event? Why is the browser trying to open the file itself?

One thing to note, when I open my page in Chrome, this is working as expected so this is a Firefox specific issue.

thnx, Christoph

Answer 1

The issue was using $.noop as the dragover handler. Replacing it with a function which actually stops propagation and the bubbling, it started working as expected.

I'm such an idiot sometimes. :p