JavaScript/HTML5/jQuery Drag-And-Drop Upload – «Uncaught TypeError: Cannot read property 'files’ of undefined»

Я заранее сообщу вам, что у меня ограниченный опыт работы с JavaScript .

На данный момент у меня есть код JavaScript:

$('#xhr-filebox').bind({
    "dragover": HandleDragEvent,
    "dragleave": HandleDragEvent,
    "drop": HandleDropEvent
});

function HandleDropEvent(e){
    var files = e.target.files || e.dataTransfer.files;
    UploadFile(files[0]);
}

(некоторый код опущен, но я добавлю больше, если вы попросите)

...и HTML:

    
...or click me to pick one.

Однако, когда я перетаскиваю в него файл, консоль Chrome JS говорит следующее:

Uncaught TypeError: Не удается прочитать «файлы» свойств неопределенного

Однако он может получить объект FileList при чтении из входного файла.

Любопытно, что когда я регистрирую аргумент события ( console.log(e) ), он регистрируется как f.event, тогда как в моем аналогичном сценарии он регистрируется как MouseEvent (скриншот: http:/ /i.stack.imgur.com/3krcT.png)

В отличие от функции bind() в jQuery, здесь используется функция addEventListener() объекта DOM, возвращаемого функцией getElementById(), IE это чистый JavaScript . Я попробовал этот метод, но ничего нового не происходит.