JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div id="droppable"></div>

CSS

#droppable
{
  width:150px;
  height:150px;
  background:deepskyblue;
  
}

JavaScript

var drop = document.getElementById('droppable');

drop.ondrop = function(e){
	var files = e.dataTransfer.files;
  
  var fileReader = new FileReader();
  
  
  
  
  fileReader.onload = function(t)
  {
  	console.log(t);
  
  	 var aud = document.createElement('audio');
  
  	aud.src = t.target.result;
    
    document.body.appendChild(aud);
  	aud.play();
  
  };
  
  
 fileReader.readAsDataURL(files[0]);
  
  return false;

}

drop.ondragover = function(){return false};