How to know that the dragged files from specific file extension?

Question

I'm making my own dropzone and I want to do an action while specific file extension dragging, I found that onDragEnter can't access file types, onDrop only can make that.

But I found a library that makes what I want to do, I tried hard to know from the source code how they do it but I fail. here is the link of the code

https://react-dropzone.netlify.com/#!/Accepting%20specific%20file%20types/5

Answer 1

Actually the file type is available, I don't know how react dropzone does it, but you can access the type via DragEvent.dataTransfer.items[0].type, items is the array of items being dragged so you can access the others via items[1] etc.

$('div').on('dragover',function(e){
console.log(e.originalEvent.dataTransfer.items[0].type);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>dropzone</div>