JSFiddle - React, Tailwind, and code Playground

by dashk

HTML

<body>
<div id="dropFileDiv" class="fileDiv">Drop Image File here</div>
<div id="dropFolderDiv" class="folderDiv">Drop Folder here</div>
<image src="#" id="uploadPrevw" class="imageLocation"></image>    
<div id="uploadFolder" class="folderLocation"></div>    
</body>

CSS

.fileDiv {
    width: 200px;
    height: 200px;
    border:2px solid black;
}

.folderDiv {
    width: 200px;
    height: 200px;
    border:2px solid blue;
}

.imageLocation {
    position: absolute;
    left: 250px;
    top: 10px;
}

.folderLocation {
    position: absolute;
    left: 250px;
    top: 210px;
    width: 400px;
    height: 200px;
    border:2px solid blue;
}

JavaScript

function dragover(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('dragover');
    return false;
}

function parseItem(entry) {
    var folderElement = document.getElementById("uploadFolder");
    
    if (entry.isFile) {
        console.log('file');
        entry.file(function(file) {
            folderElement.innerText += '\nfile - ' + file.name;
        });
    } else if (entry.isDirectory) {
        console.log('folder');
        var reader = entry.createReader();
        reader.readEntries(function(entries) {
            folderElement.innerText += '\nfolder - ' + entry.name;
            for (var i = 0; i < entries.length; i++) {
                parseItem(entries[i]);
            }
        });
    }
}

function dndDemo() {
    console.log('go');
    var $fileEl = document.getElementById("dropFileDiv");
    var $folderEl = document.getElementById("dropFolderDiv");
    
    $fileEl.addEventListener("dragover", dragover, false);
    
    $fileEl.addEventListener("drop", function(event) {
        console.log('drop');
        event.stopPropagation();
        event.preventDefault();
        var prevwElement = document.getElementById("uploadPrevw");
        var files = event.dataTransfer.files;
        var oFReader = new FileReader();
        var oFile = files[0];
        
        oFReader.onload = function (oFREvent) {
            prevwElement.src = oFREvent.target.result;
        };
        
        if (files.length === 0) {return;}
        oFReader.readAsDataURL(oFile);
 }, false);

    $folderEl.addEventListener("dragover", dragover, false);
    
    $folderEl.addEventListener("drop", function(event) {
        event.stopPropagation();
        event.preventDefault();
        var items = event.dataTransfer.items;

        if (items.length === 0) {return;}
        console.log('drop folder');
        var folderElement = document.getElementById("uploadFolder");
        folderElement.innerText = '';
       ...