<body background ="https://i.postimg.cc/qqs3k5JS/DSC-0087-3.jpg">
<h1> Custom File Upload Button</h1>
<div class="file-upload">
  <input class ="file-upload__input" type="file" name="myFile[]" id="myFile" multiple>
  <button class="file-upload__button" type="button"> Choose File(s)</button>
  <span class="file-upload__label"></span>
</div>
h1{
  color: white;
  text-align: center;
}
.file-upload{
  display: inline-flex;
  align-items: center;
  font-size: 15px:
}
.file-upload__input{
  dislplay: none;
}
.file-upload__button{
  -webkit-appearance: none;
  background: #009879;
  border: 2px solid #00745d;
  border-radius: 4px; 
  outline: none;
  padding: 0.5em 0.8em;
  margin-right: 15px;
  color: #ffffff;
  font-size: 1em;
  font-family: sans-serif;
  font-weight: bold;
  cursor: pointer;    
}
.file-upload__button:active{
  background: #00745d;
}
.file-upload__label{
  max-width: 250px;
  font-size: 0.95em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
}
Array.prototype.forEach.call(document.querySelectorAll('.file-upload__button'), function(button){
 const hiddenInput = button.parentElement.querySelector('.file-upload__input'); 
 const label = button.parentElement.querySelector('.file-upload__label');
const defaultLabelText = 'No file(s) selected';
  label.textContent = defaultLabelText;
  label.title = defaultLabelText;
  
  button.addEventListener('click', function(){
    hiddenInput.click();
  });
  
  hiddenInput.addEventListener('change', function(){
    const filenameList = Array.prototype.map.call(hiddenInput.files, function(file){
     return file.name; 
    }); 
    label.textContent = filenameList.join()
  });
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.