JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drop_zone">Drop a file here</div>
<output id="drop_zone-info"></output>

CSS

#drop_zone {
    padding:20px;
    width:120px;
    background-color:#edffff;
    color:#828282;
    font-weight:bold;
    text-align:center;
}

JavaScript

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.dataTransfer.files,
        
        dur = files.duration;
    
    document.getElementById('drop_zone-info').innerHTML = 'Duration: ' + dur + ' (h:m:s)';
}

function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);