JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://yandex.st/jquery/2.0.3/jquery.min.js"></script>
<div class="j-drop-area drop-area"><textarea></textarea></div>
<input class="fileName" type="hidden" value="">
<input class="fileData" type="hidden" value="">

CSS

.drop-area {
    display: flex;
    border: 2px dashed #77aad4;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
.drop-area textarea {
    padding: 5px;
    font: 14px bold, Arial;
    color: #bbb;
    height: 100px;
    width: 100%;
    margin: 0;
    resize: none;
    border: none;
    outline: none;
}

JavaScript

$(document).on('drop', '.j-drop-area textarea', function (e) {
    e.preventDefault();
    e.stopPropagation();
    
	var file = e.originalEvent.dataTransfer.files[0],
		reader = new FileReader(),
		fileName = file.name;
      $('.fileName').val(fileName);
      reader.onload = function (event) {
      	$('.fileData').val(event.currentTarget.result);
      };

      reader.readAsDataURL(file);
});