Drag and drop JavaScript event

Question

I'm a java guy trying my hand in JavaScript and need some help. I came across an amazing tutorial on image uploads here Mozilla Tutorial and need some help figuring it out. I am currently working on the drag and drop image upload feature. Every time I drag an image onto my area the mouse turns green so it's activated. But then when I let go it should send me an alert that says one image was found. However it always just alerts 0. So the size of the array is 0. Any ideas? Thanks for taking a look. What I've tried with no success...

1. Copying and pasting the code from the tutorial into my JavaScript file exactly
2. Moving the code to add the listeners outside of a function and into a window onload
3. Every browser I have

...

function toggleStrideMedia()
{
    if(getDisplay("strideMediaWrapper") == "" || getDisplay("strideMediaWrapper") == "none")
    {
        show("strideMediaWrapper");
             
        getElement("strideMediaDropZone").addEventListener("dragenter", dragenter, false);
        getElement("strideMediaDropZone").addEventListener("dragover", dragover, false);
        getElement("strideMediaDropZone").addEventListener("drop", drop, false);
    
    }
    else
    {
        hide("strideMediaWrapper");
    }
}

function dragenter(e) 
{
    e.stopPropagation();
    e.preventDefault();
}
     
function dragover(e) 
{
    e.stopPropagation();
    e.preventDefault();
} 

function drop(e) 
{
    e.stopPropagation();
    e.preventDefault();
         
    var dt = e.dataTransfer;
    var files = dt.files;
    
    // THIS SHOULD BE GIVING ME A ONE BUT IT ALWAYS GIVES ME A ZERO INSTEAD
    alert(files.length);
          
    handleFiles(files);
}

.

UPDATE - Fiddle Results

Answer 1

UPDATE
The actual problem turned out to be that if you try to drag images directly from one web browser tab to this web based drag and drop interface, the event will fire but no files will be dropped. The asker noted this issue on OSX and I was able to replicate the same behavior in Windows 7.

---

Without seeing your HTML, it's hard to tell what you were having difficulty with. If the ondragover/ondragenter piece wasn't set up correctly then dropping won't work, but you wouldn't see an alert at all, you'd just see the browser render the image from the local filesystem. That also means that you're almost certainly successfully adding the drop event to the correct element.

Try this Fiddle and see if it works for you: http://jsfiddle.net/qey9G/4/

HTML

<div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; 
                                  border:1px dotted grey;">
               Drag & drop your file here...
        </div>
</div>

JavaScript

var dropzone = document.getElementById("dropzone");

dropzone.ondragover = dropzone.ondragenter = function(event) {
    event.stopPropagation();
    event.preventDefault();
}

dropzone.ondrop= function drop(e) 
{
    e.stopPropagation();
    e.preventDefault();

    var dt = e.dataTransfer;
    var files = dt.files;

    alert(files.length);
}