JSFiddle - React, Tailwind, and code Playground

HTML

<label>Use <strong>shift</strong> or <strong>ctrl</strong> click to pick a few files: 
<input type="file" multiple id="myfiles" onchange="getFiles(event);" /></label>

<div id="display"></div>

JavaScript

function getFiles(event) {
            // Get input element
            myFileList = document.getElementById("myfiles");
            console.log('myFileList', myFileList.files);
            console.log('event.originalEvent', event);
            show(event);
            show(myFileList);
            console.log('event.originalEvent.dataTransfer', event.originalEvent.dataTransfer);
            console.log('event.originalEvent.files', event.originalEvent.files);
            console.log('event.originalEvent.dataTransfer.files[0]', event.originalEvent.dataTransfer.files[0]);    
            // loop through files property, using length to get number of files chosen
            for (var i = 0; i < myFileList.files.length; i++) {
                // display them in the div
                document.getElementById("display").innerHTML += "<br/>" + myFileList.files[i].name ;
            }
        }

function show(element) {    
    console.log('SHOW element: ', element);
    for(var key in element) {
        try{
            console.log(key, ' = ', element[key]);
        }catch(e) {
            console.log(key, ' can\'t show');
        }
    }
}