JSFiddle - React, Tailwind, and code Playground

HTML

<span id="FakeInput">
	<span></span><span>...</span>
	<input type="file" />
</span>

CSS

#FakeInput {position:relative;overflow:hidden;}
#FakeInput input {position:absolute;width:100%;top:0;left:0;opacity:0;cursor:pointer;z-index:10;}
#FakeInput span {display:inline-block;vertical-align:top;}
#FakeInput span:first-child {overflow:hidden;white-space:nowrap;width:150px;height:25px;padding-left:5px;border:1px solid #ccc;text-overflow:ellipsis;font:100%/25px sans-serif;color:#666;border-radius:3px;}
#FakeInput span+span {width:27px;height:27px;margin-left:5px;text-align:center;background:#ddd;}

JavaScript

var trueInput = document.querySelector("#FakeInput input"),
	fakeInput = document.querySelector("#FakeInput span:first-child");

trueInput.addEventListener("change", function(){
	fakeInput.innerHTML = trueInput.value;
}, false);