JSFiddle - React, Tailwind, and code Playground

HTML

<div id="profileImgContainer" class="formFile">
    <label>Profile Picture</label><div>
        <input type="text" id="profileImgText"><input type="button" value="Choose File" id="profileImgButton">
    </div>
    <input type="file" id="profileImg" name="profileImg">
</div>

CSS

.formFile input[type="file"] 
{   
    position:absolute;   
    z-index:32767;   
    top:32px;   
    opacity:0; 
} 
.formFile input[type="text"] 
{   
    width:160px;   
    margin-right:5px; 
} 
.formFile input[type="button"] 
{ 
    width:100px; 
}

JavaScript

$(document).ready(function()
{
    $(".formFile input[type='file']").live('change', function()
    {      $(this).parents(".formFile").find("input[type='text']").val($(this).val());
    });
});