How to check what in hand(file upload javascript)

Question

I need very custom solution for file uploading. There is a tree view of user's files, and I want to use this tree view as a dropzone. Look in pseudo code:

//divTreeView and divUploadText variables with html code
var tree = true;
('#treeView').hover(
    function() {
        if(userHoldFile()) {
            $('#treeView').html(divUploadText);
            tree = false;
    },
    function() {
        if(!tree) $('#treeView').html(divTreeView);
    }
);

So when user hovers the treeView with file in mouse, I want to show him div with text drop file to upload, but when he hovers the zone without file it should works as treeView.

Answer 1

The question is duplicated. Need event for "mouseover with file" for HTML5 Fileupload

docs https://html.spec.whatwg.org/multipage/interaction.html#the-dropzone-attribute

the example that I was need

<div dropzone="copy file:image/png file:image/gif file:image/jpeg" ondrop="receive(event, this)">
 <p>Drop an image here to have it displayed.</p>
</div>
<script>
 function receive(event, element) {
   var data = event.dataTransfer.items;
   for (var i = 0; i < data.length; i += 1) {
     if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
       var img = new Image();
       img.src = window.createObjectURL(data[i].getAsFile());
       element.appendChild(img);
     }
   }
 }
</script>