JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

CSS

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;
  cursor:   pointer;   

  /* SOME CUSTOM STYLING */
  width:  200px;
  padding: 10px; 
  text-align: center;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}


input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

JavaScript

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});