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...

Copying and pasting the code from the tutorial into my JavaScript file exactly
Moving the code to add the listeners outside of a function and into a window onload
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

enter image description here

Please help me in replacing javascript to JavaScript. The edit queue is full now — V. Bozz
– V. Bozz, Commented Mar 14, 2023 at 14:40

lmortenson · Accepted Answer · 2013-03-06 05:03:11Z

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);
}

edited Mar 6, 2013 at 5:03

answered Mar 6, 2013 at 4:42

lmortenson

1,60511 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Matt Browne Over a year ago

Using ondragover and ondrop rather than addEventListener might make it work on IE8 but otherwise (i.e. for modern browsers) this should work just as well with addEventListener. In any event, +1 for the simple test.

lmortenson Over a year ago

I agree, and overall the way events are being attached here is a little ancient. I'm assuming since he's seeing an alert though that he's successfully attaching all of them.

Matt Browne Over a year ago

I'm not sure if that will work...Macs have special handling to allow you to drag and drop an image -- to download it -- from a web page to the Finder, or your desktop, which may be interfering. Try uploading the image directly from Finder.

Matt Browne Over a year ago

Np...I guess you'll just have to explain to users that they have to drag and drop the image to Finder (or their desktop) first, then from Finder to your page.

gmustudent Over a year ago

Thank you all for your assistance! I need to get my self back over to Java where things make sense :)

|

Collectives™ on Stack Overflow

Drag and drop JavaScript event

1 Answer 1

17 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related