Drag and drop javascript event
<p>I'm a java guy trying my hand in javascript and need some help. I came across an amazing tutorial on image uploads here <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" rel="nofollow">Mozilla Tutorial</a> 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...</p>

<ol>
<li>Copying and pasting the code from the tutorial into my javascript file exactly</li>
<li>Moving the code to add the listeners outside of a function and into a window onload</li>
<li>Every browser I have</li>
</ol>

<p>...</p>

<pre><code>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);
}
</code></pre>

<p>.</p>

<p><strong>UPDATE</strong> - Fiddle Results</p>

<p><img src="http://i.stack.imgur.com/wf8Qx.png" alt="enter image description here"></p>
