JSFiddle - React, Tailwind, and code Playground

by rbyers

HTML

Drag a zip file into the box and you will see 'appplication/zip' as the file type. A yaml file however will have nothing.
<div class="drop"></div>
<div>File type:<span id='type'></span></div>
<div>File name:<span id='name'></span></div>

CSS

.drop {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

JavaScript

var target = document.querySelector('.drop');

target.addEventListener('dragover', function(e) {
  e.preventDefault();
});

target.addEventListener('drop', function(e) {
  e.preventDefault();
  var file = e.dataTransfer.files[0];
  document.getElementById('type').innerHTML = file.type;
  document.getElementById('name').innerHTML = file.name;
});