JSFiddle - React, Tailwind, and code Playground

http://jsfiddle.net/Sir_Pepe/RF3L2/

by Jens Grochtdreis

HTML

<div class="dropzone">Drop!</div>

CSS

.dropzone {
  text-align: center;
  background: #EEE;
  border: 0.2em solid #000;
  padding: 3em;
}

.valid {
  background: #EFE;
  border: 0.2em solid #0F0;
}

JavaScript

$('.dropzone').on('dragover', function(evt){
  evt.preventDefault();
});

$('.dropzone').on('dragenter', function(){
  $(this).addClass('valid');
});

$('.dropzone').on('dragleave', function(){
  $(this).removeClass('valid');
});

$('.dropzone').on('drop', function(evt){
  evt.preventDefault();
  var file = evt.originalEvent.dataTransfer.files[0];
  if(file.type === 'text/plain'){
    var reader = new FileReader();
    reader.readAsText(file);
    reader.addEventListener('load', function(){
      window.alert(reader.result);
    }, false);
  }
  $(this).removeClass('valid');
});