JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css">
<div id="fileDrop"></div>

CSS

#fileDrop {
    background: rgba(0, 0, 0, 0.2);
    width: 100px;
    height: 100px;
    padding: 10px;
}

JavaScript

window.onload = function () {
    if (typeof FileReader == "undefined") alert ("Sorry your browser does not support the File API. This tool will not work for you.\n\nPlease try using Google Chrome.\n");
    FileAPI = new FileAPI(
        // document.getElementById("fileList"),
        document.getElementById("fileField"),
        document.getElementById("fileDrop")
    );
    FileAPI.init();
    //var reset = document.getElementById("reset");        // no reset element yet
    //reset.onclick = FileAPI.clearList;                    // no function clearlist yet
    //var upload = document.getElementById("upload");        // no upload element yet
    //upload.onclick = FileAPI.uploadQueue;                // no function uploadqueue yet
}

function FileAPI (/*l,*/f,d) {
    // var fileList = l;
    var fileField = f;
    var dropZone = d;
    var fileQueue = new Array();
    var preview = null;
    
    this.init = function() {
        // fileField.onchange = this.addFiles;
        dropZone.addEventListener("dragenter", this.stopProp, false);
        dropZone.addEventListener("dragleave", this.dragExit, false);
        dropZone.addEventListener("dragover", this.dragOver, false);
        dropZone.addEventListener("drop", this.showDroppedFiles, false);
    };
    
    this.clearList = function (ev) {
        ev.stopPropagation();
        while (dropZone.childNodes.length > 0) {
            dropZone.removeChild(dropZone.childNodes[dropZone.childNodes.length - 1]);
        }
        
        var pElement = document.createElement("p");
        pElement.id = "fileDropText";
        pElement.innerHTML = "Drag and drop your images here";
        dropZone.appendChild(pElement);
        
        var imgElement = document.createElement("img");
        imgElement.id = "fileDropImg";
        imgElement.src = "img/down_green.png";
        dropZone.appendChild(imgElement);
    }
    
    this.addFiles = function() {
        addFileListItems(this.files)
    };
    
    this.dragExit...