Drag and Drop files and folders

You can drop files from OS. You can access to droped files via dataTransfer.files or dataTransfer.items.

If you want handle folders also then use dataTransfer.items.

You also may interest how to implement drag-and-drop with jQuery.

drop only files from OS

<div id="dropfilezone" class="bg-primary" 
style="width:150px; height: 150px">
</div>

<script>
var drop1 = document.getElementById("dropfilezone");
 
function demoOnDrop(e) {
    // Prevent file from being opened
    e.preventDefault();
    console.log('File(s) dropped');

    function handleFile(file, ind){
         console.log('file[' + ind + '].name = ' + file.name);
         // ...
    }

    if (e.dataTransfer.items) { // use DataTransferItemList interface 
        const len =  e.dataTransfer.items.length;
        
        for (var i = 0; i < len; ++i) {  
            if (e.dataTransfer.items[i].kind === 'file') {
              var file = e.dataTransfer.items[i].getAsFile();
              handleFile(file, i);
            }
        }
    } else {// use DataTransfer interface 
        const len = e.dataTransfer.files.length;
        
        for (var i = 0; i < len; ++i) {
            handleFile(file, i);
        }
    }
}    

function demoOnDragOver(e) {
    e.preventDefault();
    console.log("on drag over");  
    e.dataTransfer.dropEffect = "move";
}
    
drop1.addEventListener("drop", demoOnDrop);
drop1.addEventListener("dragover", demoOnDragOver);
</script>

drop files and folders from OS

<div class="w-100" id="dropzone" 
     style="min-height: 200px; border: 1px solid black;">
    Drop files and folders.
</div>

<script>
function onDropFile(fileEntry, container){
    let elem = document.createElement("li");
    elem.innerHTML = fileEntry.name;
    container.appendChild(elem);
    
    fileEntry.file(f => {/* do something with file*/});  
}
    
function onDropFolder(folderEntry, container){
    let elem = document.createElement("li");
    elem.innerHTML = folderEntry.name;
    container.appendChild(elem);
    
    let directoryContainer = document.createElement("ul");
    container.appendChild(directoryContainer);
     
    let directoryReader = folderEntry.createReader();
    
    directoryReader.readEntries((entries) => {
        entries.forEach((entry) => {
          if(entry.isFile){
             onDropFile(entry,directoryContainer);       
          }else if(entry.isDirectory){
             onDropFolder(entry,directoryContainer);
          }
      });
    });
}    
    
function demoOnDrop(e) {
    // Prevent file from being opened
    e.preventDefault();
    e.stopPropagation();
   
    let directoryContainer = document.createElement("ul");
    let droppedItems = e.dataTransfer.items;
    let len = droppedItems.length;
    
    for(var i=0; i<len; ++i){
       var entry = (droppedItems[i].getAsEntry) ? 
             droppedItems[i].getAsEntry()
           : droppedItems[i].webkitGetAsEntry(); // non-webkit browsers
        
       if(entry.isFile){
           onDropFile(entry, directoryContainer);
       }else if(entry.isDirectory){
           onDropFolder(entry, directoryContainer);
       } 
    }
    
    let dropzone = document.getElementById('dropzone');
    dropzone.innerHTML = "";
    dropzone.appendChild(directoryContainer);
}
    
let dropzone = document.getElementById('dropzone');    
dropzone.addEventListener("drop", demoOnDrop);
dropzone.addEventListener("dragover", e => {
    e.preventDefault();
    e.stopPropagation();
});    
</script>