JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropzone"></div>

CSS

#dropzone{
  background: red;
  height: 30px;
}

JavaScript

function traverseFileTree(entery, path) {
  path = path || ""
	console.log('entery', entery)
  if (entery.isFile) {
    // Get file
    entery.file(file => {
      console.log("File:", path + file.name)
      if (file.name.includes('.log')) {
        setInterval(() => {
          entery.file(file => {
            new Response(file).text().then(text => {
              console.log(text)
            })
          })
        }, 1000)
      }
    })
  } else if (entery.isDirectory) {
    // Get folder contents
    var dirReader = entery.createReader()
    dirReader.readEntries(entries => {
      console.log('entries', entries)
      for (let entery of entries) {
        traverseFileTree(entery, path + entery.name + '/')
      }
    })
  }
}

var dropzone = document.getElementById('dropzone')

dropzone.addEventListener("drop", function(event) {
  event.preventDefault()

  const items = event.dataTransfer.items
  console.log(items)

  for (item of items) {
    // webkitGetAsEntry is where the magic happens
    const entery = item.webkitGetAsEntry()

    if (entery) {
      traverseFileTree(entery)
    }
  }
}, false)

// Required for drop event to event do what we want
dropzone.ondragover = event => {
  event.preventDefault()
  return false
}