JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>
<p id="filename"></p>

CSS

input[type="file"] {
    position: absolute;
    left: 0;
    opacity: 0;
    top: 0;
    bottom: 0;
    width: 100%;
  }

  div {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccc;
    border: 3px dotted #bebebe;
    border-radius: 10px;
  }

  label {
    display: inline-block;
    position: relative;
    height: 100px;
    width: 400px;
  }
  
  div.dragover {
    background-color: #aaa;
  }

JavaScript

$('input[type=file]').on('change', function() {
	$("#filename").text($(this).val());
});

$('input[type=file]').on('dragenter', function() {
	$('div').addClass('dragover');
});

$('input[type=file]').on('dragleave', function() {
	$('div').removeClass('dragover');
});