event.dataTransfer.files не определен в Firefox

Question

Я добавляю функцию перетаскивания в мой проект, и у меня возникает проблема с Firefox.

Мой код, с которым я тестирую эту ситуацию:

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

Чтобы проверить, я перетаскиваю файл в мой файл folder_files. В chrome (версия 16) всплывает предупреждение с именем файла в порядке. С Firefox (версия 8) я получаю неопределенный. Есть идеи о том, что здесь происходит?

Answer 1

Нашел проблему.После сброса всего в объекте я увидел, что Chrome получал данные, отличные от Firefox.

Что получал Chrome:

'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] }"

Что получал Firefox:

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

Вместо того, чтобы использовать fileName / fileSize / fileType в моем коде, я просто начал использовать имя / размер / тип.

Answer 2

Вы можете добавить функцию нормализации, как показано ниже, для поддержки обоих:

// File Normalization for Firefox support:
_normalizeFunction: function (file) {
    if (file.name === undefined && file.size === undefined) {
        file.name = file.fileName;
        file.size = file.fileSize;
    }
},