How to determine if content drag and drop is text or files during javascript dragenter event

Question

Using the dragenter event, I show the dropzone on the webpage to quickly load the downloaded files, and everything works fine. However, dropzone also appears when you drag selected text. How to tell the difference at an early stage?

• I know that the drop event throws all the contents of the file that needs to be repeated using dataTransfer.files, but it's too late. I need this in dragenter, only I can see that the file array is always empty.

• I need full control over the appearance. I am not looking for an existing lib.

• I can see different values ​​for event.dataTransfer.Clipboard.effectAllowed when dragging text compared to files, but the values ​​also differ for each browser (Chrome vs FF).

• MooTools in place if this helps.

Answer 1

Well, I have made enough progress to differentiate between Chrome and Firefox (3.6+). This is probably not perfect, but in case someone might find it useful, here is 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; } } } 

Answer 2

I wrote a small function to detect drag and drop files.

 function isFileTransfer(evt){ return [].some.call(evt.dataTransfer.types,function(t){return t=="Files";}); } 

Answer 3

I needed to determine if the file was being dragged to the browser from the outside, and also that the image was being dragged from the browser window. I did this by listening to dragstart in the document . When a file is dragged into the browser from the outside, dragstart does not start. So, if it works, it means that something inside one page is being dragged.

 document.addEventListener('dragstart', function() { samePageDrag = true; }, false); document.addEventListener('dragend', function() { if (samePageDrag) { samePageDrag = false; } }, false); 

In doing so, you can check the samePageDrag value after the dragenter or dragover event to determine if the item is being dragged outside the browser or not.