Drag and Drop File Uploads from Chrome Downloads Bar

3
votes

I have successfully implemented drag and drop file uploads for a web application using HTML 5. I listen for the drop event, then grab file data from the event.dataTransfer property.

For all intents and purposes, it works exactly like dropzone.js:

http://www.dropzonejs.com/

For some reason, though, I'm unable to drag and drop files from the Chrome downloads bar.

enter image description here

The dragenter, dragover, and dragleave events fire, but no drop event fires. This can be reliably reproduced using the dropzone.js demo website.

Why?

1
javascripthtmldrag-and-dropdropzone.js
Apparently dropzone.js (and your code) aren't handling DnD events correctly then. It works just fine in the upload library I maintain, Fine Uploader. You can try for yourself on the home page by using the live demos. Fine Uploader's DnD code can be found in the library's dnd.js source file for reference. – Ray Nicholus
Cool I'll check it out – Adam
This seems like a Chrome bug. See code.google.com/p/chromium/issues/detail?id=234931& – philfreo

1 Answers

9
votes

The trick is that by default, the dropEffect attribute of the event.dataTransfer passed to dragover is set to 'none' by default. You'll need to detect this, and set it to either copy or move, depending on the use case.

For me, setting it to copy worked. I didn't have to do anything to the drop event. Just a modification to the dragover event.

Here's what I did:

// The dragover event
function onDragover(e) {
    if (e.originalEvent) {
        e = e.originalEvent;
    }

    if (!e.dataTransfer) {
        return;
    }

    // Code I added begins here
    var b = e.dataTransfer.effectAllowed;

    e.dataTransfer.dropEffect = ('move' === b || 'linkMove' === b) ? 'move' : 'copy';
    // Code I added ends here

    this.$el.addClass('dragging');

    e.stopPropagation();
    e.preventDefault();
}