Question

I’m adding drag-drop functionality to a project of mine and I’m getting a problem with firefox.

My code that I’m testing this situation with is:

document.getElementById("folder_files").addEventListener("drop", function(event) {
   event.preventDefault();
   event.stopPropagation();
   alert(event.dataTransfer.files[0].fileName);
}, false);

To test, I’m dragging a file into my folder_files div. In chrome (version 16) the alert pops up with the filename fine. With firefox (version 8), I get undefined. Any ideas on what is going on here?

Answer 1

Found the problem. After dumping everything in the object I could see that chrome was getting different data than firefox.

What chrome was getting:

'0' ...
        'size' => "30379"
        'lastModifiedDate' ...
        'fileSize' => "30379"
        'name' => "bg.png"
        'type' => "image/png"
        'webkitRelativePath' => ""
        'fileName' => "bg.png"
        'webkitSlice' => "function webkitSlice() { [native code] }"
    'length' => "1"
    'item' => "function item() { [native code] }"

What firefox was getting:

0' ...
        'size' => "30379"
        'type' => "image/png"
        'mozSlice' => "function mozSlice() {
    [native code]
}"
        'name' => "bg.png"
        'mozFullPath' => ""
    'length' => "1"
    'item' => "function item() {
    [native code]
}"

Instead of using fileName/fileSize/fileType in my code, I just started using name/size/type.