JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropzone">Drop! Here</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');
  evt.preventDefault();
});

$('.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.readAsDataUrl(file);
     var pos = file.lastIndexOf("/");
     window.alert(pos);
    reader.addEventListener('load', function(){
      window.alert(pos);
    }, false);
  }
  $(this).removeClass('valid');
});