JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropZone">
  Drop Zone
</div>

CSS

body {
  font-family: sans-serif;
}

.dropZone {
  display: inline-flex;
  background: #3498db;
  color: #ecf0f1;
  border: 0.3em dashed #ecf0f1;
  border-radius: 0.3em;
  padding: 5em;
  font-size: 1.2em;
}

JavaScript

function pointlessDelay() {
  return new Promise((resolve, reject) => {
  	setTimeout(resolve, 1000);
  });
}

const dropZone = document.querySelector('.dropZone');

dropZone.addEventListener('dragover', (e) => {
	e.preventDefault();
});

dropZone.addEventListener('drop', async (e) => {
	e.preventDefault();
  console.log(e);
  
  for (const item of e.dataTransfer.items) {
  	console.log('next loop');
    const entry = item.webkitGetAsEntry();
    console.log({item, entry});
    await pointlessDelay();
    console.log('after delay');
  }
});