JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;">
    <img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/>
<input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0);  position: relative; top: -25px; left: -1px" />
    </div>
    <a href="javascript:void(0)" id="filename" style="cursor:pointer;margin-top:15px;text-decoration:none;"></a>

JavaScript

function getFileName() {
    var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, '');
    $("#filename").text(varfile);
}
$("#fileupload").on('change', function() {
       getFileName();
});