JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<h1>Using Drag and Drop</h1>
<p>Drop files here: </p>
<div id="filedrop"></div>
<p>File Information: </p>
<div id="filedata"></div>
<h1>Reading File Data as Text</h1>
<form action="">
<label>Select a file: </label>
<input type="file" name="files" id="fileElem" />
</form>
<p>File contents: </p>
<textarea cols="80" rows="10" id="filecontents"></textarea>
</body>

CSS

body 
    {
        font-size:18pt;
    }
    #filedrop 
    {
        width: 300px;
        height: 200px;
        color: Gray;
        border: 10px dashed #9a9a9a;
    }

JavaScript

function init() {
        var bHaveFileAPI = (window.File && window.FileReader);

        if (!bHaveFileAPI) {
            alert("This browser doesn't support the File API");
            return;
        }

         document.getElementById("filedrop").addEventListener("drop", onFilesDropped);
        document.getElementById("filedrop").addEventListener("dragover", onDragOver);
        document.getElementById("fileElem").addEventListener("change", onFileChanged);

    }

    function onFileChanged(theEvt) {
        var thefile = theEvt.target.files[0];
        console.log(thefile);

        // check to see if it is text
        if (thefile.type != "text/plain") {
            document.getElementById('filecontents').innerHTML = "No text file chosen";
            return;
        }

        var reader = new FileReader();

        reader.onload = function (evt) {
            var resultText = evt.target.result;
            document.getElementById('filecontents').innerHTML = resultText;
        }

        reader.readAsText(thefile);
    }

     function onDragOver(theEvt) {
        theEvt.stopPropagation();
        theEvt.preventDefault();
    }

    function onFilesDropped(theEvt) {
        theEvt.stopPropagation();
        theEvt.preventDefault();

        var files = theEvt.target.files;
      
        document.getElementById('filedata').innerHTML = "";

        for (var i = 0; i <= files.length; i++) {
            var fileInfo = "<p>File name: " + files[i].name + "; size: " + files[i].size + "; type: " + files[i].type + "</p>";
            document.getElementById('filedata').innerHTML += fileInfo;
        }
    }

    window.addEventListener("load", init);