JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Uncaught TypeError: Cannot read property 'files' of undefined"

Question

I will advise you prior that I have limited JavaScript experience. Currently, I have the JavaScript code: ``` $('#xhr-filebox').bind({ "dragover": HandleDragEvent, "dragleave": HandleDragEvent, "drop": HandleDropEvent }); function HandleDropEvent(e){ var files = e.target.files || e.dataTransfer.files; UploadFile(files[0]); } ``` (some code is omitted, but I will add more if you request) ...and the HTML: ```

...or click me to pick one.

``` However, when I drag a file into it, the Chrome JS console says this: Uncaught TypeError: Cannot read property 'files' of undefined It can however get the FileList object when reading from a file input. Curiously, when I log the event argument ( console.log(e) ), it logs it as f.event, whereas in a similar script of mine, it logs it as MouseEvent (screenshot: https://i.stack.imgur.com/3krcT.png) Unlike the bind() function in jQuery, this uses the addEventListener() function of a DOM…

Accepted Answer

If `files` doesn't exist on `e.target`, you're looking for a `files` on `e.dataTransfer` — but if there's no `dataTransfer` property on `e` (and there doesn't seem to be in your screenshot) you'll try to dereference `undefined`, resulting in this error.

I'd change the code to:

```
function HandleDropEvent(e){
    var files = e.target.files || (e.dataTransfer && e.dataTransfer.files);
    if (files) {
        UploadFile(files[0]);
    }
    else {
        // Perhaps some kind of message here
    }
}
```

That way, if `e.target.files` doesn't exist and `e.dataTransfer` also doesn't exist, you'll get `files` being `undefined`, rather than an error.

The event object that jQuery gives you is created and normalized by jQuery. Since we know `e.dataTransfer` doesn't exist on that event object (from your screenshot), my guess is that it's not one of the properties jQuery copies over from the original event object. That's okay, though, because jQuery gives us access to the original event via `e.originalEvent`. So I'd try:

```
function HandleDropEvent(e){
    var dt = e.dataTransfer || (e.originalEvent && e.originalEvent.dataTransfer);
    var files = e.target.files || (dt && dt.files);
    if (files) {
        UploadFile(files[0]);
    }
    else {
        // Perhaps some kind of message here
    }
}
```

That grabs `files` from `e.target` if that's where it is, or from the `dataTransfer` object wherever we find it (on `e`, or on `e.originalEvent`).

JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Uncaught TypeError: Cannot read property 'files' of undefined"

Solution

Problem

Related problems