FileName

by jozsefk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<input type="file" id="test" style="display:none;">
<label for="test">
    <span class="submit">submit</span>
    <span id="test2">filename</span>
</label>

CSS

.submit{
   width:140px;
   height:40px;
   background-color:red;
   color:#fff;
   text-align:center;
   padding:10px;
   line-height:40px;
   cursor:pointer;
}

JavaScript

let file = document.querySelector('#test');
let test2 = document.querySelector('#test2');

file.addEventListener('change', function(e){
  test2.innerHTML = e.target.files[0].name;
});