How to tell if dragged contents is text or files during Javascript dragenter event

Using the dragenter event I show a dropzone on the webpage to have dropped files upload quickly, and it all works well. However, the dropzone also pops up when dragging selected text. How to tell the difference early on?

1. I know that the drop event exposes all file contents to be iterated using dataTransfer.files, but that’s too late. I need it at dragenter, only I see the files array to be empty at all times.

2. I need full control over look & feel I am not looking for an existing lib.

3. I can see different values for event.dataTransfer.Clipboard.effectAllowed when dragging text versus files, but values also differ per browser (Chrome vs FF).

4. MooTools is in place, if that helps.

Answer

Okay, I made enough progress to get differentiating working in Chrome and Firefox (3.6+). It’s probably not foolproof but in case anyone might find it useful, here’s the code:

  var isFileTransfer = false;
  if (evt.dataTransfer.types) {
    for (var i=0; i<evt.dataTransfer.types.length; i++) {
      if (evt.dataTransfer.types[i] == "Files") {
        isFileTransfer = true;
        break;
      }
    }
  }