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\": H         


        

Answer 1

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).

Answer 2

I had been using the following code for the last several years:

var files = e.target.files || 
(e.dataTransfer ? e.dataTransfer.files : e.originalEvent.dataTransfer.files);

However, I've recently run into an issue using Chrome where e.target.files was there but with a length of 0 which caused files to be empty even though dataTransfer did have the dropped files.

So, I've had to use a slightly different check:

var files = e.target.files;
if (!files || files.length === 0)
    files = (e.dataTransfer ? e.dataTransfer.files : e.originalEvent.dataTransfer.files);

Hopefuly this may help someone else.