JSFiddle - React, Tailwind, and code Playground

by Roman Fedytskyi

HTML

<div id="drop_zone" class="drop-zone">
  <p>Drag one or more files to this Drop Zone ...</p>
</div>

<div id="result"></div>

CSS

#drop_zone {
  width: 500px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  border: 2px dotted;
}

.drop-zone {
  background-color: #848ac4;
}

.active {
  background-color: #48da91;
}

JavaScript

var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', dragHandler);
dropZone.addEventListener('drop', filesDroped);

function dragHandler(event) {
    var dropZone = document.getElementById('drop_zone');
    event.stopPropagation();
    event.preventDefault();

    dropZone.className = "active";
}

function filesDroped(event) {
    var dropZone = document.getElementById('drop_zone');
    var result = document.getElementById('result');
    
    event.stopPropagation();
    event.preventDefault();
    var files = event.dataTransfer.files
    console.log(files);
		
    Object.keys(files).forEach(function(index) {
    	let li = document.createElement('li');
      li.innerHTML = files[index].name + ' / ' + files[index].type + ' / ' + files[index].size;
    	result.appendChild(li);
    });

    dropZone.className = "drop-zone";
}