Detect file type on dragenter cross browser solution

Question

I'm searching for a cross browser solution for this. In advance i tell you that i don't want to know if is a file only, because i found solutions for that. I want to know if the file is an audio, image or video basically. In Chrome when you fire the dragenter event you can get that data from here:

ev.originalEvent.dataTransfer.items[0].type;

But in Firefox, Safari and IE the "items" spec hasn't been applyed yet: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items

Edit: As of late 2021, this feature is now widely supported.

In those browsers you can only see the "files" attribute:

ev.originalEvent.dataTransfer.files[0];

But on dragenter files[0] is empty. How can i workaround this to know the file type in these other browsers?

Example (Only works on Chrome):

$(document).on('dragenter', '.drop-zone', function(ev) {
  var e = ev.originalEvent;
  e.dataTransfer.dropEffect = 'copy';
  var file = e.dataTransfer.items[0];
  var type = file.type.slice(0, file.type.indexOf('/'));
  $(ev.target).html(type);
});

$(document).on('dragleave', '.drop-zone', function(ev) {
  $(ev.target).html('Drag your file over here to know the type, no need to drop it');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drop-zone">Drag your file over here to know the type, no need to drop it</div>

Answer 1

tl;dr version: you can't.

Edit: As of late 2021, now you can, as Data​Transfer​.items is is now widely supported.

Quoting this answer:

DRAG_OVER DOES NOT HAVE THE RIGHTS to see the data in the drag event.

It apply to both dragover and dragenter events.

Why? Well, it would be a serious privacy issue. Imagine that you have an MP3 file which for some reason you want to open in your browser. You can do that by dragging it and dropping on the browser tab bar, like that:

During the drag-and-drop process, you drag the file over the page on which you are currently on, and of course you don't want this page to know anything about this file. That's why you can't get information about dragged file until it has been actually dropped.

---

You can, however, check the file type on drop event:

"drop dragover".split(" ").forEach(function(eventName) {
  document.addEventListener(eventName, function(event) {
    event.preventDefault();
  });
});
document.addEventListener("drop", function(event) {
  console.log(event.dataTransfer.files[0].type);
});

html, body {
  height: 100%;
}

<p>Try dropping a file.</p>

For drag-and-drop browser support see caniuse.com.

Answer 2

Data​Transfer​.items appears to be the only possibility. It is now supported on Firefox, only Safari and IE don't support it.