JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<div class="upload_box">
    <input type="file" id="select_file" onchange="fileName()" />
    <label for="select_file" id="selected">Select that file!</label>
</div>

CSS

.upload_box {
    overflow:hidden;
    position:relative;
}

#select_file {
    position:absolute;
    left:-300px;
}

label {
    cursor:pointer;
}

JavaScript

function fileName()
{
  var _file = document.getElementById('select_file');
  document.getElementById('selected').innerHTML = _file.value.replace(/C:\\fakepath\\/i, '');
}