jQuery/HTML5 FileAPI: Why does no drag event appear to be triggering?

Question

Why is nothing happening here when I drag a file over the imageContainer div? Nothing in the console, nothing on the page, etc.

<div id="imageContainer" style="height: 724px; width: 100%; "></div>

...

$('#imageContainer').on({
    dragenter: function dragEnter() {
        console.log('enter');
        $(this).css('background-color', 'lightBlue');
    },
    dragleave: function dragLeave() {
        console.log('leave');
        $(this).css('background-color', 'white');
    },
    dragover: false,
    drop: function dragDrop (e) {
        console.log('drop');
        jQuery.each(e.dataTransfer.files, function (index, file) {
            var fileReader = new FileReader();
            fileReader.onload = (function (file) {
                return function (e) {
                    $(this).append('<div class="dataurl"><strong>' + file.fileName + '</strong>' + e.target.result + '</div>');
                };
            })(file);
            fileReader.readAsDataURL(file);
        });
    }
});

score 3 · Accepted Answer · edited Jan 12 '15 at 22:14

3

When you run it on Firefox with Firebug is says:

e.dataTransfer is undefined

So you would like to change it with:

e.originalEvent.dataTransfer

Here is the example

edited Jan 12 '15 at 22:14

davethegr8

11,323
5
36
61

answered May 11 '12 at 01:41

Community Driven Business

4,622
1
16
20

Oops! Even fixed, though, that's not the cause. Still the same problem. – BrianFreud May 11 '12 at 01:44
^^ Related to an earlier answer. :D – BrianFreud May 11 '12 at 02:04
Hmmm, I'd been using Chrome only to this point. Something in my script seems to have both Chrome and Firefox swallowing any errors, which is unfortunate, so I can't see this same. In Firefox, at least the blue/white color change happens, but nothing at all happens in Chrome. Re the drop event, which this answer specifically applies to, I'll have to guess that this answer is right; perhaps the code itself is wrong there at the moment, since dropping an image still does nothing in Chrome, and in Firefox, it just loads the image as a new page, just like normal. – BrianFreud May 11 '12 at 02:08
So I guess this question might be better phrased, "jQuery/HTML5 FileAPI: Why does no drag event appear to be triggering *in Chrome*?" w/r/t there being no color change. – BrianFreud May 11 '12 at 02:08
The fiddle seems to work in Chrome w/ color changes, so I'm going to guess its something greasemonkey+chrome+fileAPI specific which still is unID'd. So I'll set this as the answer to the actual question I asked, but still keep looking for the fix I need. :D – BrianFreud May 11 '12 at 02:10
I hope you'll find and fix the issue in drop event. – Community Driven Business May 11 '12 at 02:13
Well, here's the full script, if anyone has any ideas :D https://github.com/brianfreud/greasemonkey-batchCAA/blob/fefab2a285fecc1a4759e137eaf2acb2510deea8/testing.user.js – BrianFreud May 11 '12 at 02:55
Turns out it was the Chrome security model for file:// urls causing the problem. Since I was working on the userscript locally, Chrome was applying the same domain file:// rules. Using the -allow-file-access-from-files switch made Chrome begin behaving again, and things began to work just like Firefox. – BrianFreud May 13 '12 at 06:27

score 0 · Answer 2 · answered May 11 '12 at 06:33

There are a few things.

First of all make sure you load the page using the http: instead of file: scheme. With file: your drop event will fire but FileReader will fail silently.

Next in the FileReader.onload you are adding the html to this which is the FileReader. Try adding it to an html element instead. In the code below #files point to a list.

Finally the dataURL is embeded in the html, use the Elements inspector to check, but not visible in the markup.

$(function () {
    $('#dropTarget').on({
        dragenter: function dragEnter() {
            console.log('enter');
            $(this).css('background-color', 'lightBlue');
        },
        dragleave: function dragLeave() {
            console.log('leave');
            $(this).css('background-color', 'white');
        },
        dragover: false,
        drop: function dragDrop(e) {
            console.log('drop');
            jQuery.each(e.originalEvent.dataTransfer.files, function (index, file) {
                var fileReader = new FileReader();
                fileReader.onload = function () {
                    console.log(this.result);
                    $('#files').append('<div class="dataurl"><strong>' + file.fileName + '</strong>' + this.result + '</div>');
                };

                fileReader.readAsDataURL(file);
            });
        }
    });
});

jQuery/HTML5 FileAPI: Why does no drag event appear to be triggering?

2 Answers2