Question

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 1

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;
      }
    }
  }