JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>test</title>

  </head>

  <body>
    <div id="dropTarget">Drag and drop a folder here</div>
  </body>

</html>

CSS

#dropTarget {
  padding: 1em;
  color: white;
  background: red;
}

JavaScript

let someItems = [{
    "itemName": "test1",
    "displayName": "test 1"
  },
  {
    "itemName": "test2",
    "displayName": "test 2"
  },
  {
    "itemName": "test3",
    "displayName": "test 3"
  },
  {
    "itemName": "test4",
    "displayName": "test 4"
  },
  {
    "itemName": "test5",
    "displayName": "test 5"
  },
  {
    "itemName": "test6",
    "displayName": "test 6"
  }
];

let moreItems = [{
    "itemName": "test7",
    "displayName": "test 7"
  },
  {
    "itemName": "test8",
    "displayName": "test 8"
  },
  {
    "itemName": "test9",
    "displayName": "test 9"
  },
  {
    "itemName": "test10",
    "displayName": "test 10"
  },
  {
    "itemName": "test11",
    "displayName": "test 11"
  },
  {
    "itemName": "test12",
    "displayName": "test 12"
  }
];

const target = document.getElementById('dropTarget');
itemList = [];

function recurseItem(item, sub) {
  if (item.isFile) {
    /// Nothing output
    Object.keys(someItems).forEach(function(key) {
      itemList.push(someItems[key]);
    });
    console.log('file', item);
    //console.log(itemList);
    //////////////////////
  }
  if (item.isDirectory) {
    /// Outputs correctly
    Object.keys(moreItems).forEach(function(key) {
      itemList.push(moreItems[key]);
    });
    console.log('dir', item);
    //console.log(itemList);
    //////////////////////
    let reader = item.createReader();
    reader.readEntries(
      entries => {
        for (let entry of entries) {
          recurseItem(entry, sub + item.name + "/");
        }
      }, err => {
        throw err;
      });
  }
}

target.ondragover = function(evt) {
  evt.preventDefault();
}

target.ondrop = function(evt) {
  evt.preventDefault();

  var items = evt.dataTransfer.items;
  for (var i = 0; i < items.length; i++) {
    let entry = items[i].webkitGetAsEntry();
    if (entry) {
      recurseItem(entry, '/');
    }
  }
  // This seems to fire when the first item
  // (the directory) is read instead of at the end
 ...